[英]jsPlumb - Disable dragging for endpoints
我正在尝试呈现一个静态页面,以显示通过流程图连接器连接的几个元素。
我不希望用户能够以任何方式拖动/编辑元素之间的连接。
但是,默认情况下,端点确实响应鼠标单击-它们可以被拖动,甚至更糟:释放鼠标按钮后,整个连接会消失。
这是我的代码部分,可在两个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文档相当清楚地指出 ,我们可以在Endpoints上切换enabled属性:
[enabled = true]布尔值可选
是否应为鼠标事件(拖放)启用端点。
但是,这似乎没有任何作用。
我是Java的新手,所以如果我遗漏了一些明显的内容,我会向您道歉。
PS我正在使用JsPlumb 2.8.0(社区版)。
找到了解决方案。
jsPlumb.importDefaults({
ConnectionsDetachable: false
});
在jsPlumb.connect()
函数之前调用此函数将禁用所有连接(及其各自的端点)的拖动事件。 粗略,但是由于我根本不需要拖放功能,因此可以使用。
实际上,当我这样做时,它会起作用。
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});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.