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

发布于 2024-12-06 06:55:55 字数 811 浏览 0 评论 0原文

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

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

原文

I'm trying to allow the user to move the 'post-it' notes from one un-ordered list of tasks to another. Ideally when the user drags the task it should be removed from its current container and appended to the new list.

Pseudo 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>

I'd like for tasks to be draggable between lists, e.g. when task e is finished it can be dragged into #done-tasks.

If you have a solution, feel free to build it on top of: http://jsfiddle.net/Zwedh/2/

Working solution: http://jsfiddle.net/RD5M6/3/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱要勇敢去追 2024-12-13 06:55:56

查看 jQuery UI 的 Droppable

回复收藏 0 原文

绿萝 2024-12-13 06:55:55

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

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

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

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

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

The solution is much simpler than I had originally anticipated!
http://jqueryui.com/demos/sortable/

回复收藏 0 原文

~没有更多了~