3

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

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

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

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

我在这里有一个演示：-

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

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

});

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

4

1 回答 1

4

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

因此，我.selected在您选择的区域中添加了一个类，将链接中的 、 和 类替换了，并.icon-trash添加了以下样式（我刚刚从 jquery UI 复制了这些样式）：.icon-plusdeleteadd

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

于 2013-03-21T17:52:45.663 回答