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