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

Posted

技术标签:

【中文标题】如何从 JSPlumb 中的组中删除项目?【英文标题】:How to remove item from a group in JSPlumb? 【发布时间】:2017-10-05 18:41:15 【问题描述】:

使用 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 的其他选项,应该可以提供帮助,但它们似乎不是......

【问题讨论】:

你检查了吗?约束:父:“默认”,约束:真 【参考方案1】:

我怀疑问题是您需要为 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", 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 中的组中删除项目?的主要内容,如果未能解决你的问题,请参考以下文章

如何从MYSQL中的组中查找前N个记录的查询结果

尝试在SignalR中的组中添加客户端但不工作

JWT 令牌中的无状态身份验证和权限

在 PySpark 数据框中的组中的列上应用函数

php 获取另一组内的组中的字段

如何在 Oracle 的组中获得第三个 [重复]