4

ユーザーがドラッグ可能なボックスを追加して jsPlumb に接続できるようにする「キャンバス」があります。ある時点で、それらのボックスの 1 つを削除できるようにしたいと考えています。これを処理するために、まずすべての接続を切り離し、ターゲット要素からエンドポイントを削除します。これは正常に機能します。

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

次に、実際の DOM 要素を削除します。

$(targetEl).remove();

この時点で、jsPlumb がおかしくなり始め、残りの要素をドラッグできなくなります。

エラー スタック

ボックスのサイズを変更して新しい接続を作成し続けることはできますが、要素をドラッグすると失敗し続け、上記のエラーが発生します。

私が間違っていることはありますか？言い換えれば、「ドラッグ可能な」環境で jsPlumb 要素を削除するより適切な方法はありますか?

4

4 に答える 4

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

文字列 ID のみを渡すとdetachAllConnectionsの違いに注意してください。removeAllEndpointsx1remove#x1

于 2013-11-05T13:18:53.407 に答える