title: jQuery draggable isn't draggable after being dropped
body: <p>I have two divs, each containing a list of quantities and items. The items are draggable and the div containing the items is droppable. If an item of the same name appears in that div, that item cannot be dropped on that div again. Eventually I will be controlling the number of items that are moved, but I'm just trying to get this part to work for now.</p>
  
  <p>The problem I'm having is that once I drop an item on the div, I can no longer drag it. I've tried adding draggable() to the new item that I am creating, but that just made things weird. </p>
  
  <p>The exact same code worked when I was adding an li to a ul, but I wanted to move just the name of the item and not the quantity, so I am using divs instead of li.</p>
  
  <p>Here is a jsfiddle of my code: <a href="http://jsfiddle.net/imjustabill/eJ4KH/" rel="nofollow">http://jsfiddle.net/imjustabill/eJ4KH/</a></p>
  
  <p>And here are the pertinent parts</p>
  
  <pre><code>      $(function () {
          $("#inventory1 .item").draggable({
              appendTo: "body",
              helper: "clone"
          });
          $("#inventory2").droppable({
              drop: function (event, ui) {
                  var item = ui.draggable.attr("data-item");
                  var qty = ui.draggable.attr("data-qty");
                  var itemDesc = ui.draggable.text();
                  if (!$(this).find("[data-item='"+item+"']").length) {
                      $("&lt;div class='qty'&gt;&lt;/div&gt;").text(qty).appendTo(this);
                      $("&lt;div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'&gt;&lt;/div&gt;").text(itemDesc).appendTo(this);
                  }
              }
          });
  
          $("#inventory2 .item").draggable({
              appendTo: "body",
              helper: "clone"
          });
          $("#inventory1").droppable({
              drop: function (event, ui) {
                  var item = ui.draggable.attr("data-item");
                  var qty = ui.draggable.attr("data-qty");
                  var itemDesc = ui.draggable.text();
                  if (!$(this).find("[data-item='"+item+"']").length) {
                      $("&lt;div class='qty'&gt;&lt;/div&gt;").text(qty).appendTo(this);
                      $("&lt;div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'&gt;&lt;/div&gt;").text(itemDesc).appendTo(this);
                  }
              }
          });
      });
  
  &lt;div id="inventory1"&gt;
  &lt;h4&gt;Inventory 1&lt;/h4&gt;
      &lt;div class="qty"&gt;7&lt;/div&gt;&lt;div class="item" data-qty="7" data-item="item1"&gt;Item 1&lt;/div&gt;
      &lt;div class="qty"&gt;5&lt;/div&gt;&lt;div class="item" data-qty="5" data-item="item2"&gt;Item 2&lt;/div&gt;
      &lt;div class="qty"&gt;2&lt;/div&gt;&lt;div class="item" data-qty="2" data-item="item3"&gt;Item 3&lt;/div&gt;
      &lt;div class="qty"&gt;9&lt;/div&gt;&lt;div class="item" data-qty="9" data-item="item4"&gt;Item 4&lt;/div&gt;&lt;/div&gt;
  
  &lt;div id="inventory2"&gt;
  &lt;h4&gt;Inventory 2&lt;/h4&gt;
      &lt;div class="qty"&gt;4&lt;/div&gt;&lt;div class="item" data-qty="4" data-item="item1"&gt;Item 1&lt;/div&gt;
      &lt;div class="qty"&gt;2&lt;/div&gt;&lt;div class="item" data-qty="2" data-item="item5"&gt;Item 5&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any ideas? Thank you.</p>