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。基本上我对这个解决方案的想法是在按钮上添加一个destroy，它总是在原始列表中。这里的问题是我确实需要至少隐藏原始文件并显示它是否从新列表中销毁相应的项目。理想情况下，我希望尽可能使用.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 }

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

1 个答案: