title: Attach endpoint to a div drargged from a palette
body: <p>I'm developping a drag and clone system. So i have a palette containing two kind of shape(circle and rectangle), i drag these shapes and clone them in a separate div.
  I want to attach an ancheor to the shapes on the palette and when i drag and clone theme into to the separate div i make them dragged again, but when i drag them the anchor are detached from the shape.</p>
  
  <p>it will very helpful if you can tell me how to achieve this.</p>
  
  <p>There isa link to my jsfiddle code <a href="https://jsfiddle.net/nmalloul/zxswcjav/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.startEventClass').draggable({
    helper: "clone",
  });
  
  $('.userTaskClass').draggable({
    helper: "clone",
  });
  
  $('.endEventClass').draggable({
    helper: "clone",
  });
  
  $('#diagramZone').droppable({
    accept: ".startEventClass, .userTaskClass, .endEventClass",
    drop: function(e, ui) {
      dragE1 = ui.helper.clone();
      dragE1.draggable({
        containment: "#diagramZone",
      });
      $(dragE1).removeClass("startEventClass");
      $(dragE1).addClass("startEventClass");
      if (ui.draggable[0].id) {
        dragE1.appendTo('#diagramZone');
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.startEventClass {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 30px;
    border: solid 2px;
    border-radius: 50px;
  }
  
  .userTaskClass {
    width: 120px;
    height: 60px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 30px;
    border: solid 2px;
    border-radius: 5px;
  }
  
  .endEventClass {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 30px;
    border: solid 5px;
    border-radius: 50px;
  }
  
  #diagramZone {
    height: 200px;
    border: solid 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="startEvent" class="startEventClass"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="userTask" class="userTaskClass"&gt;&lt;/div&gt;
  
  &lt;div id="endEvent" class="endEventClass"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>