Question

我是jQuery的新手，并且正在努力使用jQueryUI中的可排序选项。

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

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

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

我在这里有一个演示： -

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

}）;

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

Answer 1

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

所以我在所选区域添加了一个班级.selected，将.icon-trash，.icon-plus替换为链接中的delete和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/

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

1 个答案: