JsPlumb - Drag & Drop-Klonelement mit dynamischem Anker und Endpunkten

Question

Ich versuche, den Endpunkt und den Anker zu verschieben, wenn das Klonelement im Drop-Bereich erstellt und ziehbar ist, aber es bleibt in der gleichen Position. Ich habe die repaintEverything() -Methode verwendet, aber nichts ändert sich, wenn ich in den Drop-Bereich gezogen werde.

Ich sehe einige Fragen, aber ich habe keine Frage gefunden, die sich mit einem einfachen Drag & Drop-Klonelemente mit den dynamischen Endpunkten und Ankern in JsPlumb befasst.

Wie mache ich den Endpunkt mit dem Klonelement bewegen, um das Flussdiagramm zu erstellen und die ID oder Klasse der verbundenen Elemente im Drop-Bereich div?

Hier ist die Geige: 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

Make Element ziehbar in jsplumb mit dieser Funktion jsPlumb.draggable ($ (droppedElement));

Ich empfehle Ihnen, eine Direktive zu verwenden, um das Element ziehbar zu machen und um Endpunkte hinzuzufügen.

Bitte gehen Sie durch diese für weitere Informationen - 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" 
     }); 
}