Question

我使用以下代码重新排序网站上的项目：

$(document).ready(function () {
    $("#my-list").sortable({
        stop: function (event, ui) {
            var id = $(ui.item).attr('id');

            var url = '/en/account/changeposition?id=idreplace&position=posReplace';

            url = url.replace("idreplace", id);
            url = url.replace("posReplace", ui.item.index());

            window.location.href = url;
        },
        distance: 15
    });
});

但是，即使我没有在同一个地方更改元素位置和放置元素，Jquery UI也会调用'stop'-function。

是否可以在不使用自定义数据属性的情况下检测元素索引（位置）是否已更改？

// I would like to avoid adding custom data attributes like this:
<li id="id100" data-original-position="1"></li>
<li id="id101" data-original-position="2"></li>

Answer 1

查看this answer。

它对我有用，如下：

$(selector).sortable({
    start: function(event, ui) {
        ui.item.data('start_pos', ui.item.index());
    },
    stop: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        if (start_pos != ui.item.index()) {
            // the item got moved
        } else {
            // the item was returned to the same position
        }
    },
    update: function(event, ui) {
        $.post('/reorder', $(selector).sortable('serialize'))
            .done(function() {
                alert('Updated')
            });
        }
});

Answer 2

除非我遗漏了某些内容，否则update事件将是您最好的选择。根据{{3}}

当用户停止排序并且DOM位置发生变化时，会触发此事件。

因此，如果您关注用户何时停止拖动时唯一关注的是索引是否更改，只需使用update并省去设置和评估数据属性的麻烦。

Answer 3

来自http://api.jqueryui.com/sortable/#event-update

update（event，ui）类型：sortupdate 当用户停止排序并且DOM位置已更改时，将触发此事件

根据这一点，更新是您唯一需要的... becease update检测DOM位置是否已更改。

Answer 4

虽然使用更新事件似乎是大多数情况下的最佳答案，但值得注意的是，如果元素没有移动，则不会触发此事件。

虽然在大多数情况下这可能没问题，但是在排序停止时可能需要运行一些代码但是没有进行任何更改（我发现自己需要重置一些全局变量）。这只能通过接受的答案来实现。

Answer 5

创建一个bool

sortableChanged = false;

在true可排序的更新中设置为JQuery。

检测Jquery UI中的元素位置是否已更改可排序

5 个答案: