jsPlumb: delete a draggable element

Question

I have a “canvas” where I allow the user to add draggable boxes and connect them with jsPlumb. I want to let them delete one of those boxes at some point in time. To handle that, I first detach all connections and remove endpoints from the target element, which works fine

jsPlumb.detachAllConnections(targetBoxId);
jsPlumb.removeAllEndpoints(targetBoxId);

I then remove the actual DOM element:

$(targetEl).remove();

At this point, jsPlumb starts freaking out and doesn't allow me to drag the remaning elements anymore:

I can keep resizing the boxes and making new connections, but dragging an element keeps failing and emitting the above error.

Is there something I'm doing wrong? In other words, is there a proper-er way to remove a jsPlumb element in a “draggable” environment?

Answer 1

You did remove the connections and the endpoints. But before you remove() the object from DOM you have to jsPlumb.detach() it:

jsPlumb.detachAllConnections(targetBoxId);
jsPlumb.removeAllEndpoints(targetBoxId);
jsPlumb.detach(targetBoxId); // <--
targetBoxId.remove()

Answer 2

I was also having the same problem when trying to delete, inside a specific div, all the draggable elements and their connections...

I found out that it has to do with the way the connections are deleted. I was only using detachAllConnections , which apparently still leaves the endpoints in the elements I wanted to delete (that caused trouble after deleting them).

I had to use instead jsPlumb.deleteEveryEndpoint() which will not only delete the connections but also the endpoints, giving no error after also deleting the elements :)

Answer 3

Hi I am using this currently and I guess this will help you for sure.

jsPlumb.ready(function(){
    ShowStartNode() ;
});
function ShowStartNode(){
    var newState = $('<div>').attr('id', 'start').addClass('item');
    var title = $('<div>').addClass('title').text('Start');
    var connect = $('<div>').addClass('connect');
    newState.css({
      'top': '80px',
      'left': '500px'
    });
    jsPlumb.makeTarget(newState, {
      anchor: 'Continuous',
      connector:[ "Flowchart" ]
    });
    jsPlumb.makeSource(connect, {
      parent: newState,
      anchor: 'Continuous',
      connector:[ "Flowchart" ]
    });
    newState.append(title);
    newState.append(connect);
    $('#centerdiv').append(newState);
    jsPlumb.draggable(newState, {
      containment: '#centerdiv'
    });
    newState.dblclick(function(e) {
      jsPlumb.detachAllConnections($(this));
      $(this).remove();
      e.stopPropagation();
    });         
}

Answer 4

This snippet is working for me:

var targetBoxId = '#' + window.idOfCaller;

jsPlumb.detachAllConnections(window.idOfCaller);
jsPlumb.removeAllEndpoints(window.idOfCaller);
$(targetBoxId).remove(); 

Notice the difference between the detachAllConnections and removeAllEndpoints where passing only the string id eg x1 and the remove were passing the #x1