jsplumb 实现拖拽组件
时间: 2023-11-22 21:05:43 浏览: 32
JSPlumb 是一个流程图绘制工具,它同样可以用来实现拖拽组件。以下是一个简单的示例:
1. 引入 JSPlumb 库。
```html
<script src="https://cdn.jsdelivr.net/npm/jsplumb@4.7.0/dist/js/jsplumb.min.js"></script>
```
2. 在 HTML 中定义拖拽组件的容器和组件。
```html
<div id="container">
<div class="component" id="component1">组件1</div>
<div class="component" id="component2">组件2</div>
</div>
```
3. 使用 JSPlumb 初始化容器和组件。
```javascript
// 初始化容器
jsPlumb.ready(function() {
jsPlumb.setContainer(document.getElementById("container"));
});
// 初始化组件
jsPlumb.draggable(document.getElementById("component1"));
jsPlumb.draggable(document.getElementById("component2"));
```
4. 定义连接线。
```javascript
// 定义连接线
jsPlumb.connect({
source: "component1",
target: "component2",
endpoints: ["Dot", "Dot"],
paintStyle: { strokeWidth: 2, stroke: "blue" },
connector: "StateMachine"
});
```
5. 运行代码,即可实现拖拽组件和连接线的效果。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSPlumb Demo</title>
<script src="https://cdn.jsdelivr.net/npm/jsplumb@4.7.0/dist/js/jsplumb.min.js"></script>
<style>
#container {
width: 500px;
height: 500px;
border: 1px solid black;
}
.component {
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid black;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="component" id="component1">组件1</div>
<div class="component" id="component2">组件2</div>
</div>
<script>
// 初始化容器
jsPlumb.ready(function() {
jsPlumb.setContainer(document.getElementById("container"));
});
// 初始化组件
jsPlumb.draggable(document.getElementById("component1"));
jsPlumb.draggable(document.getElementById("component2"));
// 定义连接线
jsPlumb.connect({
source: "component1",
target: "component2",
endpoints: ["Dot", "Dot"],
paintStyle: { strokeWidth: 2, stroke: "blue" },
connector: "StateMachine"
});
</script>
</body>
</html>
```