JsPlumb - Glisser et déposer un élément clone avec ancrage dynamique et points de terminaison

Question

J'essaie de déplacer le point d'extrémité et l'ancrage lorsque l'élément clone est créé et déplacé dans la zone de dépôt, mais il reste dans la même position. J'ai mis la méthode repaintEverything() mais rien ne change quand on la fait glisser dans la zone de dépôt.

Je vois quelques questions, mais je n'ai trouvé aucune question qui traite avec un simple glisser-déposer des éléments clone avec les extrémités et les ancres dynamiques dans JsPlumb. Comment faire pour que le point de terminaison se déplace avec l'élément clone pour générer le diagramme de flux et obtenir l'ID ou la classe des éléments connectés dans la zone de dépôt div?

est ici le violon: 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

élément Marque draggable dans jsplumb en utilisant cette fonction jsPlumb.draggable ($ (droppedElement));

Je suggère que vous utilisiez une directive pour rendre l'élément draggable et pour ajouter des points de terminaison.

S'il vous plaît passer par cela pour plus d'informations - 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" 
     }); 
}