如何從JSPlumb中的組中刪除項目？

Question

使用JSPlumb，我希望能夠將元素拖入組中，在組中使用它們，然後再次將它們拖出組。我的代碼正確創建了一個組，我可以將項目拖入其中，正確地移動組，但項目保留在組內，並且我無法再將其拖出...任何想法？

（1）DIV設置

<div id="flowchartBox"> 

<div id="group1" class="groupBox" style="top:10px; left:300px"></div> 
<br/> 
    <div id="shape1" class="shape" style="top:10px; left:5px"></div> 
    <div id="shape2" class="shape" style="top:10px; left:80px"></div> 

    <div id="shape3" class="shape" style="top:200px; left:80px"></div> 

</div> 

（2）的JavaScript JSPlumb：

jsPlumb.ready(function() { 

    jsPlumb.draggable($(".shape"), {containment:"parent"}); 

    jsPlumb.addGroup({ 
    el:group1, 
    id:"g1", 
    droppable:true, 
    // constrain: false, 
    //revert: false 
    orphan: true 
    //prune:true 
    }); 


    }); 

，你可以從註釋的代碼看，我已經嘗試過，從the jsplumb community docs，應協助其他選項，但他們似乎不是...

Answer 1

我懷疑問題是你需要設置一個container爲JSPlumb檢測到一個項目已經被放到其組外。

也許與此演示對比將有助於診斷問題（支付全屏運行）。

每次添加或刪除項目時，代碼將在瀏覽器的控制檯中記錄，同時記錄組中剩餘項目的計數。

jsPlumb.setContainer($("body")); 
 

 
jsPlumb.ready(function() { 
 

 
    jsPlumb.draggable($(".shape")); 
 

 
    jsPlumb.addGroup({ 
 
    el: group1, 
 
    id: "g1", 
 
    //droppable: true, 
 
    //constrain: false, 
 
    //revert: false 
 
    orphan: true, 
 
    //prune:true 
 
    }); 
 

 
}); 
 

 
jsPlumb.bind("group:addMember", function(p) { 
 
    var grp = jsPlumb.getGroup("g1"); 
 
    console.log("Group", p.group.id, "added", p.el.id, "for a total of", grp.getMembers().length, "members."); 
 
}); 
 

 
jsPlumb.bind("group:removeMember", function(p) { 
 
    var grp = jsPlumb.getGroup("g1"); 
 
    console.log("Group", p.group.id, "removed", p.el.id, "for a total of", grp.getMembers().length, "members."); 
 
});

#group1 { 
 
    background-color: gold; 
 
    height: 100px; 
 
} 
 

 
.shape { 
 
    text-align: center; 
 
    position: absolute; 
 
    background-color: whitesmoke; 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
<script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script> 
 

 
<div id="flowchartBox"> 
 
    <div id="group1" class="groupBox">Group Box 1</div> 
 
    <div id="shape1" class="shape" style="top:110px; left:20px">Shape 1</div> 
 
    <div id="shape2" class="shape" style="top:110px; left:100px">Shape 2</div> 
 
    <div id="shape3" class="shape" style="top:110px; left:180px">Shape 3</div> 
 
</div>