jQueryUI可排序-在两个列表视图之间添加和删除带有图标的项目

我是jQuery新手，在jQueryUI中挣扎于可排序选项

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

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

将项目从一个div拖放到另一个div时的相同原则。只需根据图标所在的分区切换图标即可

我这里有一个演示：-

}))

---

任何帮助/指针都很好。

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

因此，我添加了一个类

.selected

，将

.icon trash

、

.icon plus

替换为链接中的

删除

和

添加

类，并添加了以下样式（我刚刚从jquery UI复制）：

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

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

我更新了你的小提琴：

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