jsPlumb multiple containment drag parent

Question

I have following HTML

<div class='wraper'> <div class="demo statemachine-demo1"> <div class="w" id="inperson">IN PERSON <div class="ep"></div> </div> <div class="w" id="rejected"> REJECTED <div class="ep"></div> </div> </div> <div class="demo statemachine-demo1"> <div class="w" id="inperson">IN PERSON <div class="ep"></div> </div> <div class="w" id="rejected"> REJECTED <div class="ep"></div> </div> </div> </div>as per the above HTML the wrapper div contains two div each .demo div contains two div and are connected to each other .statemachine-demo1 .inperson div to .statemachine-demo2 .inperson(.statemachine-demo1.inperson ----> .statemachine-demo2.inperson) and .statemachine-demo1 .reject to .statemachine-demo2 .reject(.statemachine-demo1.reject -----> .statemachine-demo2.reject).

now if i drag class w the join line will move continuously, but what i want to know is their any way if i drag parent div statemachine-demo1 the child div reject and inperson class div should also move along with joined line continuously.

Answer 1

For this you need customised jquery draggable function instead of using jsPlumb.draggable() for parent div's. Whenever you drag a parent div, you need to check whether any of the child has connection, if so you need to repaint those connections. Code:

$('.demo').draggable({ // considering parent div has 'demo' class as in your case
        drag:function(event){
            // on drag check any child has connections and repaint them
            $(this).find('._jsPlumb_endpoint_anchor_').each(function(i,el){
                   jsPlumb.repaint($(el));
            });                 
        }
});