jsplumb移动源节点,源节点的端点没有移动,移动目标节点时,目标节点的端点移动了
时间: 2023-10-24 18:06:45 浏览: 53
这个问题可能是由于 jsplumb 的设置或者使用方式引起的。可以先检查源节点和目标节点的端点是否正确设置,包括端点的位置和锚点的设置。另外,也可以检查移动源节点或目标节点的代码是否正确。
在移动源节点时,需要同时移动源节点和端点。可以使用 jsplumb 实例的 `setSourceEndpoint` 方法来设置端点的位置,例如:
```
jsPlumbInstance.setSourceEndpoint(sourceId, {
anchor: "Continuous",
endpoint: "Dot",
connector: ["Flowchart"],
isSource: true,
isTarget: false,
dragOptions: {},
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2 },
maxConnections: -1,
onMaxConnections: function(info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
},
connectorOverlays: [
["Arrow", { location: 1 }],
["Label", { label: "foo", location: 0.1 }]
]
});
// 移动端点
jsPlumbInstance.setSourceEndpoint(sourceId, {
anchor: [0.5, 1, 0, 1],
endpoint: "Dot",
connector: ["Flowchart"],
isSource: true,
isTarget: false,
dragOptions: {},
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2 },
maxConnections: -1,
onMaxConnections: function(info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
},
connectorOverlays: [
["Arrow", { location: 1 }],
["Label", { label: "foo", location: 0.1 }]
]
});
```
同样,移动目标节点时,也需要同时移动目标节点和端点。可以使用 `setTargetEndpoint` 方法来设置目标节点的端点,例如:
```
jsPlumbInstance.setTargetEndpoint(targetId, {
anchor: "Continuous",
endpoint: "Dot",
connector: ["Flowchart"],
isSource: false,
isTarget: true,
dragOptions: {},
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2 },
maxConnections: -1,
onMaxConnections: function(info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
},
connectorOverlays: [
["Arrow", { location: 1 }],
["Label", { label: "foo", location: 0.1 }]
]
});
// 移动端点
jsPlumbInstance.setTargetEndpoint(targetId, {
anchor: [0.5, 0, 0, -1],
endpoint: "Dot",
connector: ["Flowchart"],
isSource: false,
isTarget: true,
dragOptions: {},
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2 },
maxConnections: -1,
onMaxConnections: function(info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
},
connectorOverlays: [
["Arrow", { location: 1 }],
["Label", { label: "foo", location: 0.1 }]
]
});
```
注意,在移动节点时,需要重新设置端点的位置和锚点,因为节点的位置和大小已经改变。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)