jsPlumb

Question

我正在尝试呈现静态页面以显示与 Flowchart 连接器相关的多个元素。

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

但是，默认情况下，端点会响应鼠标点击 -- 它们可以被拖动，甚至更糟：松开鼠标按钮后整个连接就会消失。

这是我的代码部分，它在两个 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 的新手，所以如果我遗漏了一些明显的东西，我提前道歉。

P.S。我正在使用 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});

jsPlumb - 禁用端点拖动

jsPlumb - Disable dragging for endpoints

javascript