jsPlumb多个容纳拖动父

Question

我具有以下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>按照上述HTML包装器DIV包含两个DIV每个.demo div包含2个格，并且连接到彼此.statemachine-demo1的.inperson div来。 statemachine-demo2 .inperson（.statemachine-demo1.inperson ----> .statemachine-demo2.inperson）和.statemachine-demo1 .reject to .statemachine-demo2 .reject（.statemachine-demo1.reject ----- > .statemachine-demo2.reject）。

现在如果我拖动类w连接线会不断移动，但我想知道的是他们的任何方式，如果我拖动父div statemachine-demo1子div拒绝和inperson类div也应该随着连接线移动不断。

Answer 1

为此，您需要自定义jQuery可拖动函数，而不是使用jsPlumb.draggable（）作为父div。每当你拖动一个父div时，你需要检查是否有任何孩子有连接，如果是的话，你需要重新绘制这些连接。代码：

$('.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)); 
      });     
     } 
});