draggable - 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 包含两个 div 并相互连接 .statemachine-demo1 .inperson div 到 .statemachine-demo2 .inperson(.statemachine-demo1.inperson ----> .statemachine-demo2.inperson) 和 .statemachine-demo1 .reject 到 .statemachine-demo2 .reject(.statemachine-demo1.reject -----> .statemachine-demo2.reject)。

现在，如果我拖动类 w 连接线将连续移动，但我想知道的是，如果我拖动父 div statemachine-demo1 的任何方式，子 div 拒绝和个人类 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));
            });                 
        }
});