title: Draggable/Droppable: Cannot read updated data-* on draggable element in drop-event
body: <p>Below is a simplified version of my code. Why does the <code>alert()</code> keeps saying <code>1</code>?
  I can see that the HTML <code>data-count</code> gets updated up to <code>2</code> and then stops updating. Hope you can help me out.</p>
  
  <pre><code>&lt;div class="product" data-count="1"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(".product").draggable({ 
    helper: function(event) {
      return $(event.target).closest(".product").clone().css({
        width: $(event.target).width()
      });
    }
  });
  
  $(".panel-body").droppable({
    drop: function(event, ui) {
      alert(ui.draggable.data("count"));
      ui.draggable.attr("data-count", ui.draggable.data("count") + 1);
      ui.draggable.detach().appendTo($(this));
    }
  });
  </code></pre>