Question

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

因此，当用户更改sortable时，主要部分中的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

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

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

就够了。在调用sortable（）之前确保加载了jQueryUI。

Answer 2

试试这个：

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

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

可排序的变化div取决于索引

2 个答案: