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:

Error Stack

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?

score 1 · Answer 1 · answered Aug 17 '14 at 14:54

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()

answered Aug 17 '14 at 14:54

Benvorth

7,416
8
49
70

Hi Benvorth I tried the Same but the problem is still persisting can you please suggest me the reason for that – Abhishek Soni Oct 25 '16 at 18:19

score 0 · Answer 2 · edited May 29 '13 at 15:12

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 :)

score 0 · Answer 3 · edited Apr 24 '15 at 09:02

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();
    });         
}

Christos Papoulas · Answer 4 · 2013-11-05T14:40:58.310

0

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 e.g x1 and the remove were passing the #x1

edited Nov 05 '13 at 14:40

answered Nov 05 '13 at 13:18

Christos Papoulas

2,469
3
27
43

jsPlumb: delete a draggable element

4 Answers4