title: jQuery: draggable connect to sortable. draggable item has a different DOM from sortable list
body: <p>I am now able to drag an item to a sortable. But the sortable list has a different DOM.</p>
  
  <pre><code>&lt;!-- The draggable items. Has the "original" DOM in the LI tags. --&gt;
  &lt;ul class="draggable_text"&gt;
      &lt;li&gt;&lt;span&gt;DRAG THIS A&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;DRAG THIS B&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;!-- This list has a different DOM in the LI tags --&gt;
  &lt;ul id="stagerows"&gt;
      &lt;li&gt;&lt;p&gt;This is a new DOM dragged from "DRAG THIS A"&lt;/p&gt;&lt;/li&gt;
      &lt;li&gt;&lt;p&gt;This is a new DOM dragged from "DRAG THIS B"&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  $(document).ready(function() {
      $('.draggable_text &gt; li').draggable({
          //helper:'clone',
          helper: function(event, ui) {
              return '&lt;div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;"&gt;xxx&lt;/div&gt;';
          },
          connectToSortable:'#stagerows'
      });
  
      $('#stagerows').sortable({
          handle: '.drag_handle'
      });
  });
  </code></pre>
  
  <p>The Helper has this:
      xxx
  This should be dropped into the sortable...</p>
  
  <p>The "helper" works. But when I "dropped" the item into the sortable, it just reverts back to the "original" DOM. I would want the "newly created DOM" (the one created in helper) to be dropped into the sortable.</p>
  
  <p>I hope I am making sense. Thank you!</p>
  
  <p>Another way of saying it:
  when I drag an apple, it now turns into an orange. but when i drop it, it turns back into an apple..</p>