javascript - 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 文档比较清楚states我们可以在 Endpoints 上切换 enabled 属性:

[enabled=true] Boolean optional

Whether or not the Endpoint should be enabled for mouse events (drag/drop).

然而，这似乎并没有做任何事情。

我是 Javascript 的新手，所以如果我遗漏了一些明显的东西，我提前道歉。

附言我使用的是 JsPlumb 2.8.0(社区版)。

Answer 1

找到解决方案。

jsPlumb.importDefaults({
        ConnectionsDetachable: false
});

在 jsPlumb.connect() 函数之前调用它会禁用所有连接(及其各自端点)的拖动事件。很粗糙，但是因为我根本不需要拖放功能，所以这行得通。