jsPlumb拖动多个节点

jsPlumb拖动多个节点

使用jsplumb官方提供的方法,添加拖拽选中之后就可以多个节点进行操作

let obj = $('#abc')[0];  //节点
//添加节点为选中
jsplumb.addToDragSelection(obj);
//删除单个节点选中
jsplumb.removeFromDragSelection(obj);
//删除所有节点选中
jsplumb.clearDragSelection();
jsPlumb提供了drag事件和stop事件来分别处理节点拖拽过程中和拖拽结束后的操作。 drag事件会在节点被拖拽的过程中被触发,可以通过它来实时获取节点的位置信息: ```js jsPlumb.bind("drag", function(element) { var pos = jsPlumb.getPosition(element.el); console.log(pos); }); ``` stop事件则会在节点拖拽结束后被触发,可以在该事件中进行一些后续处理,比如更新节点位置信息: ```js jsPlumb.bind("stop", function(element) { var pos = jsPlumb.getPosition(element.el); console.log(pos); // 更新节点位置信息 // ... }); ``` 完整代码示例: ```html <!DOCTYPE html> <html> <head> <title>jsPlumb节点拖拽释放事件</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jsPlumb/2.17.7/js/jsplumb.min.js"></script> <style type="text/css"> #container { width: 600px; height: 400px; border: 1px solid #ccc; position: relative; } .node { width: 100px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; position: absolute; text-align: center; line-height: 100px; cursor: move; } </style> </head> <body> <div id="container"> <div class="node draggable" style="top: 100px; left: 100px;">节点1</div> <div class="node draggable" style="top: 200px; left: 200px;">节点2</div> </div> <script type="text/javascript"> jsPlumb.ready(function() { // 设置节点拖动 jsPlumb.draggable($(".draggable"), { containment: "parent" }); // 监听节点拖拽事件 jsPlumb.bind("drag", function(element) { var pos = jsPlumb.getPosition(element.el); console.log(pos); }); // 监听节点拖拽停止事件 jsPlumb.bind("stop", function(element) { var pos = jsPlumb.getPosition(element.el); console.log(pos); // 更新节点位置信息 // ... }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值