9

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

$(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 也会调用“停止”功能。

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

// 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>
4

5 回答 5

30

看看这个答案。

它对我有用，如下所示：

$(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')
            });
        }
});
于 2013-07-13T22:46:48.697 回答
11

除非我遗漏了什么，否则该update活动将是您在这里的最佳选择。根据文档

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

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

于 2014-05-14T20:35:11.750 回答
0

从http://api.jqueryui.com/sortable/#event-update得到这个

update( event, ui )类型：sortupdate 当用户停止排序并且DOM位置发生变化时触发该事件

据此，更新是您唯一需要的……因为更新会检测 DOM 位置是否已更改。

于 2014-11-21T04:24:30.197 回答
0

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

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

于 2016-08-18T11:43:26.117 回答
0

创建一个布尔值

sortableChanged = false;

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

于 2017-10-19T06:22:25.917 回答