使用jQuery在多个无序列表之间交换li元素

Question

我试图允许用户将“post-it”笔记从一个无序的任务列表移动到另一个。理想情况下，当用户拖动任务时，应将其从当前容器中删除并附加到新列表中。

伪HTML

<ul class="task-bucket" id="backlog-tasks">
    <!-- task a -->
    <!-- task b -->
    <!-- task c -->
</ul>
<ul class="task-bucket" id="do-tasks">
    <!-- task d -->
</ul>
<ul class="task-bucket" id="doing-tasks">
    <!-- task e -->
</ul>
<ul class="task-bucket" id="done-tasks">
    <!-- task f -->
</ul>

我希望任务可以在列表之间拖动，例如当任务e 完成后，可以将其拖入＃done-tasks。

如果您有解决方案，请随意在http://jsfiddle.net/Zwedh/2/

之上构建解决方案

工作解决方案：http://jsfiddle.net/RD5M6/3/

Answer 1

$(function(){   
    $('.task-bucket').sortable({
        connectWith: '.task-bucket'
    });

    $('.task').draggable({
        connectToSortable: '.task-bucket'
    });
    $('ul', 'li').disableSelection();
})

解决方案比我原先预期的要简单得多！ http://jqueryui.com/demos/sortable/

Answer 2

查看jQuery UI的Droppable