I'm trying to render a static page to show several elements connected with Flowchart connectors.
I do not want the user to be able to drag / edit connections between elements in any way.
However, by default, endpoints do respond to mouse clicks -- they can be dragged, and even worse: the whole connection disappears after the mouse button is released.
Here's the portion of my code that creates connection between two div elements:
<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>
The API documentation rather clearly states that we can toggle the enabled property on Endpoints:
[enabled=true] Boolean optional
Whether or not the Endpoint should be enabled for mouse events (drag/drop).
However, this doesn't seem to do anything.
I'm very new to Javascript, so I apologize in advance if I'm missing something obvious.
PS I'm using JsPlumb 2.8.0 (Community Edition).
Found a solution.
jsPlumb.importDefaults({
ConnectionsDetachable: false
});
Calling this before jsPlumb.connect()
function disables drag events for all connections (and their respective endpoints). Crude, but since I do not need drag&drop functionality at all, this works.
actually, when I do like this, it works.
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});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.