title: jQuery UI Droppable and Sortable - dropping in the correct sort location
body: <p>I'm working on a project where I'm dragging elements from a 3rd party jQuery control to a jQuery sortable, using a combination of droppable and sortable.</p>
  
  <p>This works perfectly fine, except the item being added is always added to the bottom of the sortable list, and you must then move it to the correct location as a separate step.</p>
  
  <p>Is it possible to have the item added to the location where you dropped it in the list?</p>
  
  <p>You can see this behavior in the jQuery shopping card droppable demo from <a href="http://jqueryui.com/droppable/#shopping-cart">here</a>. Here is a <a href="http://jsfiddle.net/Geupm/">jsfiddle</a> of the same code. As you add items from the products to your cart at the bottom, it always adds at the bottom, even if you drop it near the top.</p>
  
  <p>Here's the jQuery code:</p>
  
  <pre><code>     $(function () {
       $("#catalog").accordion();
       $("#catalog li").draggable({
           appendTo: "body",
           helper: "clone"
       });
       $("#cart ol").droppable({
           activeClass: "ui-state-default",
           hoverClass: "ui-state-hover",
           accept: ":not(.ui-sortable-helper)",
           drop: function (event, ui) {
               $(this).find(".placeholder").remove();
               $("&lt;li&gt;&lt;/li&gt;").text(ui.draggable.text()).appendTo(this);
           }
       }).sortable({
           items: "li:not(.placeholder)",
           sort: function () {
               $(this).removeClass("ui-state-default");
           }
       });
   });
  </code></pre>