可排序的更改 div 取决于索引

Question

我正在尝试这样做，当用户对列表进行排序时，div 会根据列表的顺序改变位置。

因此，当用户更改可排序对象时，主要部分中的 div 也会更改。目前它不起作用

这是我的代码

$("#element-list").sortable({
    stop:function(event, ui){
        // new index
        var index = ui.item.index();
        var classs = $(ui.item).attr('class');

        // find the correct div in the main div and update its index
        $('#main').find('.'+classs+'').index(index);

    }
});

这是我的html

<ul id="element-list">
    <li class="blue">Blue Div</li>
    <li class="red">Red Div</li>
    <li class="yellow">Yellow Div</li>
</ul>

<div id="main">

    <div class="blue"></div>
    <div class="red"></div>
    <div class="yellow"></div>
</div>

Answer 1

试试这个：

这将遍历排序列表，然后重新排列主 div 中的相应 div 以匹配。

$("#element-list").sortable({
  stop: function (event, ui) {
    $("#element-list li").each(function () {
        var classs = $(this).attr("class");
        $("#main").find('.' + classs).appendTo($("#main"));
    });
  }
});

Answer 2

默认情况下可排序，this JSFiddle 是您想要实现的目标吗？

$("#element-list").sortable();

就够了。确保在调用 sortable() 之前加载了 jQueryUI。