jQuery 可使用 mouseup、mousedown 进行排序

Question

我正在尝试使用 jQuery Sortable 并且有效:)

所以我找到了 HERE 一种使用 mousedown 和 mouseup 来取消按钮的方法，有效但列表的计数是错误的，例如，我的列表中有 4 个项目但是当我移动一个，重新订购的只有 3 个

完整代码如下：

$(function() {

        var isDragging = false;
        $("#sortable").mousedown(function() {
            isDragging = false;
        })
        $("#sortable").mousemove(function () {
            isDragging = true;
        })
        $("#sortable").mouseup(function () {
            var order = $("#sortable").sortable('serialize');

            var r = $("#sortable").sortable("toArray");
            var a = $("#sortable").sortable("serialize", {
                attribute: "id"
            });
            console.log(r, a);
            $.ajax({
                data: order,
                type: 'POST',
                url: 'salvar.php', // save.php - file with database update
                success: function (order) {

                },
            });
            var wasDragging = isDragging;
            isDragging = false;
            if (!wasDragging) {
                $("#throbble").toggle();
            }
        });
    });

Html:

<ul id="sortable">
<li class="ui-state-default" id="item-1">1</li>
<li class="ui-state-default" id="item-2">2</li>
<li class="ui-state-default" id="item-3">3</li>
<li class="ui-state-default" id="item-4">4</li>

运行代码： Running Code

Answer 1

只需使用events sortable 本身提供的。比自己尝试实现更容易：

$('#sortable').on('sortupdate', function() {
    // Send to server
});

Updated fiddle

jQuery 可使用 mouseup、mousedown 进行排序

jQuery Sortable using mouseup, mousedown

jquery

jquery-ui-sortable