title: JsPlumb - Drag and Drop clone element with dynamic anchor and endpoints
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/4ypazpk8/" rel="nofollow noreferrer">https://jsfiddle.net/4ypazpk8/</a></p>
  
  <pre><code>$(".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"
      });
    }
  
   }
   });
  </code></pre>