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 .in div div .statemachine-demo2 .inperson（.statemachine- demo1.inperson ----＆gt; .statemachine-demo2.inperson）和.statemachine-demo1 .reject to .statemachine-demo2 .reject（.statemachine-demo1.reject -----＆gt; .statemachine-demo2.reject ）。

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

Answer 1

为此，您需要自定义jquery draggable函数，而不是使用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));
            });                 
        }
});

jsPlumb多个包含拖动父级

1 个答案: