JsPlumb - 動的アンカーとエンドポイントを持つクローン要素のドラッグ＆ドロップ

Question

クローン要素が作成され、ドロップ領域でドラッグ可能なときにエンドポイントとアンカーを移動しようとしていますが、同じ位置にとどまります。私はrepaintEverything（）メソッドをputしましたが、ドロップエリアにドラッグすると何も変わりません。

いくつか質問がありますが、JsPlumbの動的エンドポイントとアンカーを使用して簡単なドラッグ＆ドロップクローン要素を扱う質問は見つかりませんでした。

クローン要素を使用してエンドポイントを移動させて、フローチャートダイアグラムを作成し、ドロップエリアdivの接続された要素のIDまたはクラスを取得する方法を教えてください。

ここでフィドルです：https://jsfiddle.net/4ypazpk8/

$(".startClass").draggable 
({ 
    helper : 'clone', 
    revert : true, 
    drag: function(){ 
    jsPlumb.repaintEverything(); 
    } 
}); 

$("#dropArea").droppable({ 

    accept : '.startClass, .activityClass, .endClass', 
    containment : 'dropArea', 

    drop : function (e, ui) { 
    droppedElement = ui.helper.clone(); 
    $(droppedElement).draggable({containment: "parent"}); 
    droppedElement.appendTo('#dropArea'); 
    ui.helper.remove(); //Don't replicate the item 

    /* Add endpoint to the start item */ 
    if(ui.draggable[0].id == "start"){ 
    //alert("ID: " + ui.draggable[0].id); 
    jsPlumb.addEndpoint($(droppedElement), { 
     isSource:true, 
     isTarget: false, 
     connector : "Straight", 
     connectorStyle: { strokeWidth:5, stroke:'black'}, 
     scope:"blueline", 
     anchor: "Right" 
    }); 
    } 

} 
}); 

Answer 1

は jsPlumb.draggable（$（droppedElement））この機能を使用してjsplumbに要素をドラッグしてください。

要素をドラッグ可能にし、エンドポイントを追加するためにディレクティブを使用することをお勧めします。

詳細は、この通過してください - element dragging jsplumb

if(ui.draggable[0].id == "start"){ 
     //alert("ID: " + ui.draggable[0].id); 
     jsPlumb.draggable($(droppedElement)); 
     jsPlumb.addEndpoint($(droppedElement), { 
      isSource:true, 
      isTarget: false, 
      connector : "Straight", 
      connectorStyle: { strokeWidth:5, stroke:'black'}, 

      anchor: "Right" 
     }); 
}