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