Using jsPlumb, I managed to have the following setup:
- There are multiple nodes acting like nodes in a special type of flowchart.
- Each node has one single target where connections can be dropped onto.
- Every node has zero, one or more exits. Each exit acts as jsPlumb source, and is allowed to have one connection at most.
Little example first: http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html
(after an hour of trying, I unfortunately didn't get it to run on jsFiddle - so I host it myself)
What I want to achieve is:
If the user drags a new connection from an exit to another node, it should be established as intended. But all the other connections being on this exit should be removed.
I tried different approaches:
- Having a
listener (links to jsPlumb documentation) on each exit bubble. Doesn't work -> the event never gets fired no matter what I tried.
- Having an instance
listener . I thought I could get the existing connections from the endpoint in the
object I'm receiving. Open the console while looking at the example, and you see it's always
, no matter how many connections there are.
. This would actually work, but the user cannot drag another connection to replace the first.
Steps to reproduce:
- Move your mouse to one of the orange squares, click and drag a connection another node. (connection should establish)
- Move your mouse to the same square and click/drag another connection to the same or another target node. (second connection should establish. watch the console printing
. This should be
Number of connections:1
What am I doing wrong?