Question

我有这个HTML代码：

<div id="pages">
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
</div>

仅供测试我想在排序网格时显示元素索引：

$( "#pages" ).sortable({

    sort: function(event,ui){
        console.log($('#pages').index(ui.item));
    }
});

返回的索引是拖动元素开始拖动时的索引。如果我在停止/更新事件中移动代码，我会收到正确的索引。我的问题是，拖动视觉通知（在其他div之间翻转）是索引返回的另一个，我需要更改元素的css边距。

如何在拖动元素时获得正确的顺序？

TIA frgtv10

Answer 1

要访问拖动项目的当前索引，您需要使用ui.placeholder项目。

$( "#pages" ).sortable({
    helper: "clone",
    sort: function(event, ui) {
        console.log($(ui.placeholder).index());
    }
});