使用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)JSPlumb的Javascript：
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开始的其他选项,应该有所帮助,但它们似乎并不…
解决方法
我怀疑问题是你需要为JSPlumb设置一个
container来检测一个项目是否已被删除到其组之外.
也许与这个演示进行比较将有助于诊断问题(全屏运行付出代价).
每次添加或删除项目时,代码都会在浏览器的控制台中记录,以及组中剩余项目的计数.
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","removed","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>