title: Shopping cart - Drag and Drop bug
body: <p>I have implemented jQuery's shopping card based on the example: <a href="http://jsfiddle.net/RR6z5/1/" rel="nofollow">http://jsfiddle.net/RR6z5/1/</a></p>
  
  <p>But there is a little bug. When I drag an element from products to shopping card and then <strong>without drop</strong>, I drag from shopping card to products, the original element from Product dissapears. How to avoid this?</p>
  
  <p>Thanks.   </p>
  
  <pre><code>$(function () {
  $("#catalog").accordion();
  $("#catalog li").draggable({
      appendTo: "body",
      helper: "clone"
  });
  $("#cart ol").droppable({
      out: function (event, ui) {
          var self = ui;
          ui.helper.off('mouseup').on('mouseup', function () {
              $(this).remove();
              self.draggable.remove();
          });
      },
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          if (ui.draggable.is('.dropped')) return false;
          $(this).find(".placeholder").remove();
          $("&lt;li&gt;&lt;/li&gt;").text(ui.draggable.text()).appendTo(this).draggable({
              appendTo: "body",
              helper: "clone"
          }).addClass('dropped');
      }
  }).sortable({
      items: "li:not(.placeholder)",
      sort: function () {
          // gets added unintentionally by droppable interacting with sortable
          // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
          $(this).removeClass("ui-state-default");
      }
  });
  
  
  });
  </code></pre>