JQuery UI .sortable 按钮从当前列表中删除并返回到原始列表

Question

我想在移动的项目上附加一个按钮，单击该按钮将从列表中删除该项目并将其返回到其原始位置。 This plugin 具有我正在寻找的功能，但我已经搜索了一整天，看起来 .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") 但如果它不会再次出现在原始列表中，那就没有用了。我一直在研究here in this fiddle 的另一种可能（不理想）的解决方案。基本上我对这个解决方案的想法是为按钮添加一个破坏，它总是在原始列表中。这里的问题是，如果相应的项目从新列表中销毁，我确实需要至少从原始列表中隐藏它并显示它。所以理想情况下，如果可能的话，我想用 .sortable 来做到这一点。

Answer 1

借用 jQuery Sortable 示例，这似乎与您想要的非常相似。

关键在 Sortable 的 connectWith 属性中。此属性可以单向设置。这使您可以使用可以维护的特定排序设置初始列表，同时允许根据需要将项目拖到辅助列表中。示例：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());    
    }

});​

一点css：

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