JsPlumb - Drag and Drop clone element with dynamic anchor and endpoints

Question

I am trying to move the endpoint and anchor when the clone element is created and draggable in the drop area, but it stay in the same position. I putted the repaintEverything() method but nothing changes when dragged in the drop area.

I see some questions, but I didn't find any question that dealts with a simple drag and drop clone elements with the dynamic endpoints and anchors in JsPlumb.

How I make the endpoint move with the clone element to build the flowchart diagram and get the id or class of the connected elements in the drop area div?

Here's the fiddle: 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 draggable in jsplumb using this function jsPlumb.draggable($(droppedElement));

I suggest you use a directive to make element draggable and for adding endpoints.

Please go through this for more info - 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"
        });
}