jQueryUI sortable - 在2个列表视图之间添加和删除带有图标的项目

Question

我是jQuery的新手，并且在jQueryUI中苦苦寻找可排序的选项。

当您单击删除图标时，我希望将DVD添加到未选定区域，并将图标更改为加号（+）。

当您单击未选区域中的加号图标时，我希望项目移动到“添加区域”，图标更改为“bin”

将项目从一个div拖放到另一个div时的原理相同。 只需要根据它们所在的div来切换图标。

我在这里有一个演示： -

http://jsfiddle.net/w3vvL/3/

$("#gallery").sortable({
   connectWith: "#trash"
   });
   $("#trash").sortable({
   connectWith: "#gallery"

}）;

任何帮助/指针都会很棒。

Answer 1

图标的第一个问题是通过使图标依赖于项目所在的容器来解决的。这也使得更容易实现添加和删除功能，因为您不再需要关心图标。

所以我添加了一个类.selected到你选择的区域，用delete替换.icon-trash ， .icon-plus并从链接add类并添加以下样式（我刚从jquery UI复制）：

.dvdlist a { /* plus */
    background-position: -16px -128px;
}
.selected a { /* trash */
    background-position: -176px -96px;
}

第二个问题通过一个简单的点击处理程序解决：

$('.delete, .add').on('click', function() {
    item = $(this).parent();
    item.fadeOut(function() {
        if (item.parent().attr('id') == 'trash') {
            $('#gallery').append(item.fadeIn());
        } else {
            $('#trash').append(item.fadeIn());
        }
    });
});  

我更新了你的小提琴： http ： //jsfiddle.net/w3vvL/11/