jsplumb节点可拖动_jquery – jsPlumb拖动元素位置
时间: 2023-08-16 22:04:37 浏览: 238
jsPlumb中文api
4星 · 用户满意度95%
首先,需要在页面中引入jsPlumb库和jQuery库。
然后,按照以下步骤设置节点可拖动:
1. 给节点元素添加类名,例如"draggable"。
2. 使用jsPlumb.draggable()方法将这些带有类名"draggable"的元素设置为可拖动:
```js
jsPlumb.draggable($(".draggable"), {
containment: "parent" //限制节点只能在父级容器内拖动
});
```
其中,containment属性用于限制节点只能在指定的容器内拖动。
完整代码示例:
```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"
});
});
</script>
</body>
</html>
```
阅读全文