jsPlumb - detach connection with sourceId == targetId

Question

I'm new to jsPlumb and I'm having troubles with a connection that has the same source and target. I have to forbid these type of connections and I think the best way to do this is: when I finish creating the connection, if it has the same sourceId and targetId, delete the connection. I'm doing this:

jsPlumb.bind('connection', function(info) { 
    console.log('connection bind - From: ' + info.sourceId + ' To: ' + info.targetId);

    if (info.sourceId == info.targetId) {
        console.log('sourceId == targetId');
        jsPlumb.detach(info);
    }
});

But what happens is this

The connection is deleted but it looks like the source endpoint is still there but, if I drag the item, the dot stays in the same place as if it has no reference to the item anymore, which is ok because the connection was deleted, but it's not ok because that dot shouldn't be there.

Any inputs on this? Thank you.

Answer 1

I solved this problem with:

jsPlumb.bind("connectionDragStop", function (connection) {
    //console.log("connectionDragStop");
    if (connection.sourceId == connection.targetId) {
        //console.log('sourceId == targetId');
        alert("Connections with the same source and target aren't allowed. The connection will be deleted.");
        jsPlumb.detach(connection);
    }
});

It's working perfectly now.