如何从JSPlumb中的组中删除项目？

问题描述：

使用JSPlumb，我希望能够将元素拖入组中，在组中使用它们，然后再次将它们拖出组。我的代码正确创建了一个组，我可以将项目拖入其中，正确地移动组，但项目保留在组内，并且我无法再将其拖出...任何想法？如何从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，应协助其他选项，但他们似乎不是...

你检查吗？约束：父母：“默认”，约束：真 } –

答

我怀疑问题是你需要设置一个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>

如何从JSPlumb中的组中删除项目？

相关推荐