jQuery - 2 sortable lists: How to add a removed li back to list 1
<p>I have two sortable unordered lists and a trash can. Users are taking items from list1 and dropping them in list2. They can also remove items from list2 by dragging and dropping them over a trash can div. All of this works fine, but now I'd like to add the dropped ("trashed") list item back to list1.</p>

<p>I'm using ASP.NET, so the ul controls are getting their list items in the code behind.</p>

<p>Any help is appreciated.</p>

<pre><code>$('#&lt;%= list1.ClientID %&gt;, #&lt;%= list2.ClientID %&gt;').sortable({
        stop: function (event, ui) {
            storeAndUpdateGroupItems();
        },
        connectWith: ".connectedSortable, #trashCan"
    }).disableSelection();

    $('#trashCan').droppable({
        accept: '#&lt;%= list2.ClientID %&gt; li',
        tolerance: 'pointer',
        drop: function (event, ui) {
            $('#&lt;%= list1.ClientID %&gt;').append(ui.draggable); //problem...
            ui.draggable.remove();
            storeAndUpdateGroupItems();
        }
    });
</code></pre>

<p>If I add ui.draggable.html() to the .append() method the html gets added back into list1, but I'm trying to add the actual draggable, sortable li back to list1.</p>

<p>And the HTML</p>

<pre><code>&lt;td&gt;
        &lt;div class="availableCoins"&gt;
            &lt;ul id="_ulAllItems" runat="server" class="connectedSortable"&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;div class="selectedCoins"&gt;
            &lt;ul id="_ul" runat="server" class="connectedSortable"&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class="removeItem"&gt;
        &lt;div id="trashCan"&gt;
    &lt;/td&gt;
</code></pre>

<p><strong>EDIT</strong> OK, I got this working. I feel like it's kind of "hacky." I just rebuilt the li using the ui.draggable.html(). It works, and after the item is added back to list1 it's draggable and sortable. Thanks for the suggestions.</p>

<pre><code>$('#trashCan').droppable({
    accept: '#&lt;%= list2.ClientID %&gt; li',
    tolerance: 'pointer',
    drop: function (event, ui) {
        $('#&lt;%= list1.ClientID %&gt;').append("&lt;li class='dragItem'&gt;" + ui.draggable.html() + "&lt;/li&gt;");
        ui.draggable.remove();
        storeAndUpdateGroupItems();
    }
});
</code></pre>
