Кнопка JQuery UI .sortable для удаления из текущего списка и возврата к исходному списку

Question

Я хочу добавить кнопку к перемещенным элементам, которая при нажатии удалит элемент из списка и вернет его в исходное положение. Этот плагин обладает функциональностью, которую я ищу, но я искал весь день, и, похоже, этого не хватает в.sortable.

Что я имею в качестве структуры:

<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>

Вот 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();
});

Экспериментируя с разными вещами, я могу успешно вызывать.sortable("destroy"), но это не принесет пользы, если он больше не появится в исходном списке. Есть еще одно возможное (не идеальное) решение, которое я рассматривал здесь в этой скрипке. В основном мои мысли об этом решении - добавить кнопку уничтожить, и она всегда находится в первоначальном списке. Проблема здесь в том, что мне действительно нужно, по крайней мере, скрыть это от оригинала и показать его, если соответствующий элемент уничтожен из нового списка. Так что в идеале я хотел бы сделать это с.sortable, если это возможно.

Answer 1

Заимствование из примеров jQuery Sortable, кажется, что-то очень похожее на то, что вы хотите, должно быть возможным.

Ключ находится в свойстве connectWith в Sortable. Это свойство может быть установлено в одну сторону. Это позволяет вам установить свой начальный список с определенной сортировкой, которую можно поддерживать, в то же время позволяя элементам перетаскивать их в свой дополнительный список по желанию. Пример: 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>​

ЯШ:

$(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());    
    }

});​

немного CSS:

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