4

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

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

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

$(targetEl).remove();

在这一点上，jsPlumb 开始吓坏了，不允许我再拖动剩余的元素：

错误 堆

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

有什么我做错了吗？换句话说，在“可拖动”环境中删除 jsPlumb 元素是否有更合适的方法？

4

4 回答 4

1

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

jsPlumb.detachAllConnections(targetBoxId);
jsPlumb.removeAllEndpoints(targetBoxId);
jsPlumb.detach(targetBoxId); // <--
targetBoxId.remove()
于 2014-08-17T14:54:30.147 回答
0

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

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

我不得不改用jsPlumb.deleteEveryEndpoint()它，它不仅会删除连接，还会删除端点，在删除元素后也不会出错:)

于 2013-05-29T14:51:56.943 回答
0

嗨，我目前正在使用它，我想这肯定会对您有所帮助。

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();
    });         
}
于 2013-07-29T05:39:12.847 回答
0

这个片段对我有用：

var targetBoxId = '#' + window.idOfCaller;

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

注意 thedetachAllConnections和removeAllEndpointswhere 仅传递字符串 id egx1和removeare 传递#x1

于 2013-11-05T13:18:53.407 回答