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

【问题标题】：jQueryUI sortable - add and remove items with icon between 2 list viewsjQueryUI 可排序 - 在 2 个列表视图之间添加和删除带有图标的项目
【发布时间】：2013-03-21 15:27:01
【问题描述】：

我是 jQuery 新手，并且在 jQueryUI 中的可排序选项上苦苦挣扎。

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

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

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

我这里有一个演示：-

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

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

});

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

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

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

所以我在您选择的区域中添加了一个 .selected 类，将链接中的 .icon-trash、.icon-plus 替换为 delete 和 add 类，并添加了以下样式（我刚刚从 jquery 复制用户界面）：

.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/

【讨论】：