Jquery Drag and Drop - Not able to drag back
<p>I want to be able to put back an item to his original location list, by drag or by a remove button im the destiny list. Until now I have been able to drag to the final list and to remove it from the final list, but I can't find a way to put it back to the original list.</p>

<p>Here is the code I have by now (testable version here: <a href="http://jsfiddle.net/PmVhd/" rel="nofollow">http://jsfiddle.net/PmVhd/</a>):</p>

<pre><code>&lt;style&gt;
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; cursor: move }
#cart { width: 300px; float: left; margin-top: 1em; cursor: move }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
&lt;/style&gt;
&lt;script&gt;
  $(function () {
      $("#catalog").accordion();
      $("#catalog li").draggable({
          helper: "clone"
      });
      $("#catalog ul").droppable({
          drop: function (event, ui) {
              $(ui.draggable).remove();
              $("&lt;li&gt;&lt;/li&gt;").text(ui.draggable.text()).appendTo(this);
          }
      });

      $("#cart ol").draggable({
          appendTo: "body",
          helper: "clone"
      });
      $("#cart ol").droppable({
          drop: function (event, ui) {
              $(ui.draggable).remove();
              $(this).find(".placeholder").remove();
              var el = $("&lt;li&gt;" + ui.draggable.text() + "&lt;/li&gt;&amp;nbsp;&lt;a href='#'&gt;[x]&lt;/a&gt;").filter('a')
                  .click(function () {
                      el.remove();
                   }).end().appendTo(this);
          }
      });
  });
</code></pre>

<p>

</p>

<pre><code>&lt;div id="products"&gt;
&lt;h1 class="ui-widget-header"&gt;Car Extras&lt;/h1&gt;
&lt;div id="catalog"&gt;
&lt;h2&gt;&lt;a href="#"&gt;Security&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;
  &lt;ul&gt;
    &lt;li id="1"&gt;ABS&lt;/li&gt;
    &lt;li id="2"&gt;ESP&lt;/li&gt;
    &lt;li id="3"&gt;Airbag&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h2&gt;&lt;a href="#"&gt;Confort&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;
  &lt;ul&gt;
    &lt;li&gt;Air Conditioning&lt;/li&gt;
    &lt;li&gt;Hands-free Phone&lt;/li&gt;
    &lt;li&gt;Alligator Leather&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>
</p>

<pre><code>&lt;div id="cart"&gt;
&lt;h1 class="ui-widget-header"&gt;My Car Extras&lt;/h1&gt;
&lt;div class="ui-widget-content"&gt;
&lt;ol&gt;
  &lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>Thanks for any help.</p>
