title: jQuery drag and drop, duplicates clone on drop
body: <p>Not sure what is wrong, but when I drop item in second list, I'm editing that clone, html code on drop, and content that I'm adding to item, is being duplicated.   </p>
  
  <p>For example, I'm dropping an image, but on drop I want to add text box and label, my code is adding text box and label, but twice.</p>
  
  <p>Here is my code : </p>
  
  <pre><code>$("#left-pane li").draggable({
      containment: '#gbox',
      cursor: 'move',
      helper: 'clone',
      scroll: false,
      connectToSortable: '#right-pane',
      appendTo: '#right-pane',
      start: function () {},
      stop: function (event, ui) {}
  }).mousedown(function () {});
  
  $("#right-pane").sortable({
      sort: function () {},
      placeholder: 'ui-state-highlight',
      receive: function () {},
      update: function (event, ui) {}
  });
  
  $("#right-pane li").live('dblclick', function () {
      $(this).remove();
  })
  
  $("#right-pane").droppable({
      accept: "#left-pane li",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          $(ui.draggable).append("&lt;div class='single-item'&gt;&lt;input type='text' class='item-title' /&gt;&lt;br /&gt;&lt;textarea class='item-text'&gt;&lt;/textarea&gt;&lt;/div&gt;");
      }
  });
  
  $("#left-pane").droppable({
      accept: "#right-pane li",
      drop: function (event, ui) {}
  });
  
  $("ul, li").disableSelection();
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul id="left-pane"&gt;
     &lt;li&gt;&lt;img src="example.png" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="example2.png" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="example3.png" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="right-pane"&gt;
  &lt;/ul&gt;
  </code></pre>