jsPlumb：删除一个可拖动的元素

Question

我有一个“画布”，我允许用户添加可拖动的框并用jsPlumb连接它们。 我想让他们在某个时间点删除其中一个盒子。 为了解决这个问题，我首先分离所有连接并从目标元素中删除端点，这样可以正常工作

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

然后我删除了实际的DOM元素：

$(targetEl).remove();

此时，jsPlumb开始吓坏了，不允许我再拖动重新生成的元素：

我可以继续调整框的大小并建立新的连接，但拖动元素会一直失败并发出上述错误。

有什么我做错了吗？ 换句话说，是否有一种正确的方法来删除“可拖动”环境中的jsPlumb元素？

Answer 1

您确实删除了连接和端点。 但是在从DOM中删除（）对象之前，你必须使用jsPlumb.detach（）它：

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

Answer 2

在尝试删除特定div中的所有可拖动元素及其连接时，我也遇到了同样的问题...

我发现它与删除连接的方式有关。 我只使用了detachAllConnections ，它显然仍然将端点留在我想要删除的元素中（删除它们后会造成麻烦）。

我不得不使用jsPlumb.deleteEveryEndpoint() ，这不仅会删除连接而且还会删除端点，并且在删除元素后也不会出现错误:)

Answer 3

嗨，我目前正在使用此功能，我想这对您有帮助。

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

这段代码对我有用：

var targetBoxId = '#' + window.idOfCaller;

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

注意detachAllConnections和removeAllEndpoints之间的detachAllConnections ，其中只传递字符串id，例如x1和remove传递#x1