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之间的差异，其中只传递字符串ID，例如x1和remove正在传递#x1