Question

使用JSPlumb，我希望能够将元素拖到一个组中，在组中使用它们，然后再次将它们拖出 out 。我的代码正确地创建了一个组，我可以将项目拖入其中，正确地移动组，但项目保留在组内部，我不能再将它拖出来...任何想法？

（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的其他选项，应该有所帮助，但它们似乎并不是......

Answer 1

我怀疑问题是您需要为JSPlumb设置container以检测项目已被删除到其组外。

也许与这个演示进行比较将有助于诊断问题（全屏运行付出代价）。

每次添加或删除项目时，代码都会在浏览器的控制台中记录，以及组中剩余项目的计数。

＆＃13;

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.");
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: