JQuery UI .sortable button to remove from current list and return to original list

Question

I want to append a button on moved items that when clicked will remove the item from the list and return it to its original position. This plugin has the functionality I'm looking for but I've been searching all day and it looks like this is missing from .sortable.

What I have as a structure is:

<ul class="sortable">
  <li class="parent old">
    <h3 class="heading">User 1</h3>
    <a class="remove">X</a>
    <ul class="sortable">
      <li class="ui-state-default old">
        <h3>My Image</h3>
      </li>
      <li class="ui-state-default old">
        <h3>My Image 2</h3>
      </li>
    </ul>
  </li>
</ul>

Here's the js:

$('.sortable').sortable({
    connectWith: [".newList"],
    handle: "h3",
    cursor: "move",
    placeholder: "placeHolder",
    opacity: 0.5,
    items: ".old",
    clone: "helper",
    revert: true
});
$('.remove').click(function(){
    $(this).prevAll('.parent:first').remove();
});

Experimenting with different things I can successfully envoke the .sortable("destroy") but that will do no good if it won't appear in the original list again. There is another possible (not ideal) solution that I've been looking at here in this fiddle. Basically my thoughts on this solution is adding a destroy to the button and it is always in the original list. The problem here is that I really do need to at least hide this from the original and show it if the corresponding item is destroyed from the new list. So ideally I would like to do this with .sortable if possible.

Answer 1

Borrowing from the jQuery Sortable examples, it seems something very similar to what you want should be possible.

The key is in the connectWith property on the Sortable. This property can be set one-way. This allows you to set your initial list with a specific sortation that can be maintained while allowing the items to be dragged into your secondary list as desired. Example: http://jsfiddle.net/rvAgL/

html:

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>​

js:

$(function() {
        $( '#sortable1').sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
        $('#sortable2').sortable({
            update:function(ev, ui){
                var widget = $(this);
                var removeButton = $("<span>X</span>").click(function(){
                    var parentLi = $(this).parent();
                    $(this).remove();
                    parentLi.appendTo($('#sortable1'))
                     $('#sortable1 li').sort(asc_sort).appendTo($('#sortable1'));
                });
                $(ui.item).append(removeButton);
            }
        }).disableSelection();

    function asc_sort(a, b){
        return ($(b).text().toUpperCase()) < ($(a).text().toUpperCase());    
    }

});​

a bit of css:

 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; cursor:pointer }​