title: jQuery UI connectToSortable how to access dropped element attr's
body: <p>I am using a jQuery UI draggable list connected to a sortable list, which mostly works well except that when an item is dropped onto the sortable list it does not seem to correctly clone the original element id, or any associated jquery data().</p>
  
  <p>Weirdly these things ARE available from inside the receiver function, but it doesn't seem to actually save them to the elements so things like the sortable list's update function never see the new dropped element correctly as the new li element doesn't really have an id.</p>
  
  <p>What am I doing wrong?! </p>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $("#dest").sortable( {
        update : function () { 
            onUpdate();
          },
        receive: function(event, ui) {
            alert("dropped item ID: "+ui.item.attr('id'));
          }
      });
  
      jQuery('#src &gt; li').draggable({helper:'clone',connectToSortable:'#dest'});
  });
  
  function onUpdate() {
      var order = $('#dest').sortable('toArray');
      var txt = "Order: "+order;
  
      $("#info").text(txt);
  
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>Source List (dragable):
  &lt;div&gt;
      &lt;ul id="src"&gt;
          &lt;li id="src_0"&gt;src 0&lt;/li&gt;
          &lt;li id="src_1"&gt;src 1&lt;/li&gt;
          &lt;li id="src_2"&gt;src 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  Target List (sortable):  
  &lt;div&gt;
      &lt;ul id="dest"&gt;
          &lt;li id="dest_0"&gt;dest 0&lt;/li&gt;
          &lt;li id="dest_1"&gt;dest 1&lt;/li&gt;
          &lt;li id="dest_2"&gt;dest 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;span id="info"&gt;
      Waiting update...
  &lt;/span&gt;
  </code></pre>
  
  <p>Demo at <a href="http://jsfiddle.net/h3WJH/1/" rel="nofollow">http://jsfiddle.net/h3WJH/1/</a></p>