jsPlumb - 禁用端点的拖动

Question

我正在尝试呈现一个静态页面以显示与流程图连接器连接的几个元素。

我不希望用户能够以任何方式拖动/编辑元素之间的连接。

但是，默认情况下，端点确实会响应鼠标单击——它们可以被拖动，甚至更糟：释放鼠标按钮后，整个连接消失了。

这是我的代码中在两个div 元素之间创建连接的部分：

<div id="elema" class="elema">a test</div>
<div id="elemb" class="elemb">a really, ridiculously long test</div>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.connect({
source:"elema",
target:"elemb",
anchors: ['Right', 'Left'],
connector: [ "Flowchart", { cornerRadius: 20 } ],
endpoint: ["Dot", {"enabled": false}]
});
});
</script>

API 文档相当清楚地指出，我们可以在端点上切换启用的属性：

[启用=真] 布尔值可选

是否应为鼠标事件启用端点(拖放(。

但是，这似乎没有任何作用。

我对Javascript很陌生，所以如果我错过了一些明显的东西，我

提前道歉。附言我正在使用 JsPlumb 2.8.0(社区版(。

Answer 1

找到了一个解决方案。

jsPlumb.importDefaults({
ConnectionsDetachable: false
});

在函数jsPlumb.connect()之前调用此选项将禁用所有连接(及其各自的终结点(的拖动事件。粗糙，但由于我根本不需要拖放功能，因此可以工作。

Answer 2

实际上，当我这样做时，它可以工作。

var sourceEndPoint = {
endpoint: "Dot",
enabled: false, // to disable dragging
paintStyle: {
stroke: "#9e9e9e",
fill: "#ffffff",
radius: 5,
strokeWidth: 1
},
isSource: true,
connector: [ "Bezier", { curviness: 50, stub: 0 } ],  
};
instance.addEndpoint(toId.toString(), sourceEndpoint, {anchor: outAnchor, uuid:sourceUUID});