jsplumb节点拖拽释放事件

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

阅读全文

jsplumb节点拖拽释放事件

最新推荐

TensorFlow查看输入节点和输出节点名称方式

Jenkins节点配置实现原理及过程解析

C#中TreeView节点的自定义绘制方法

详解C#读取Appconfig中自定义的节点

PI节点的在线率，节点收益，输入数据，版本号解析

RStudio中集成Connections包以优化数据库连接管理

管理建模和仿真的文件

Keil uVision5全面精通指南

flink提交给yarn19个全量同步MYsqlCDC的作业，flink的配置参数怎样设置

PHP博客旅游的探索之旅