jquery - Jquery在两个元素之间拖放

Question

我需要制作一个在屏幕中间按特定顺序有 5 个图像的应用程序，然后我希望能够将图像从这个图像列表中拖出屏幕一侧的某个地方。然后可以将元素拖回列表中，但要将其自身移回其原始位置，因为列表必须以正确的顺序排列，例如 1.2.3.4.5 并且将 3 和 4 拖出会使图像列表为 1.2.5。这可以在jquery中做到吗？

Answer 1

最好的选择是使用 jQuery UI 及其可排序功能。它允许您在 html 列表之间拖放。

http://jqueryui.com/demos/sortable/#connect-lists

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

在上面的示例中，您需要列出 ID 为 #sortable1、#sortable2 的列表。connectWith 允许您定义这些列表将连接到哪个元素。通过将 .connectedSortable 应用于#sortable1、#sortable2，您将能够在它们之间进行拖放。