javascript - jQuery UI sortable 的 serialize 方法排除了一项

Question

我正在使用 jQuery UI sortable 获取页面上的元素列表，每次更改时我都想将这些元素的顺序保存在数据库中。

但是，我遇到了一个奇怪的错误(在我看来就像一个错误):serialize 和 toArray 方法总是从生成的序列化字符串中排除一个项目(或数组)。这始终是当前正在拖动的项目。这意味着从未真正正确跟踪订单。

这是我的 javascript 示例:

$('.setContent').sortable({change:

    function(event, ui) {

        // Serialise the new order
        var newOrder = $('.setContent').sortable('serialize');

        // Add the current set id and the action name
        newOrder += '&setId='+currentSet+'&action=usrStuff:changeCardsOrder';

        // Send the data to the server
        $.post('ajax.php', newOrder);

   }

});

和 HTML:

<div class="setContent>
    <div class="cardSmall" id="card_5">
        <div class="hanzi">俄国</div>
        <div class="meaning">Russia</div>
    </div>
    <div class="cardSmall" id="card_4">
        <div class="hanzi">韩国</div>
        <div class="meaning">Korea</div>
    </div>
    <div class="cardSmall" id="card_6">
        <div class="hanzi">中国</div>
        <div class="meaning">China</div>
    </div>
    <div class="cardSmall" id="card_12">
        <div class="hanzi">日本</div>
        <div class="meaning">Japan</div>
    </div>
    <div class="cardSmall" id="card_13">
        <div class="hanzi">德国</div>
        <div class="meaning">Germany</div>
    </div>
    <div class="cardSmall" id="card_17">
        <div class="hanzi">巴西</div>
        <div class="meaning">Brasil</div>
    </div>
    <div class="cardSmall" id="card_14">
        <div class="hanzi">法国</div>
        <div class="meaning">France</div>
    </div>
    <div class="cardSmall" id="card_19">
        <div class="hanzi">美国</div>
        <div class="meaning">America</div>
    </div>
    <div class="cardSmall" id="card_16">
        <div class="hanzi">英国</div>
        <div class="meaning">England</div>
    </div>
</div>

因此，在本例中，列表中有九个项目。但是 sortable 方法只会返回大约八个的信息。

那么我该如何解决这个问题呢？

Answer 1

您可能需要 update 事件，而不是 change 事件。

change 会在 during 排序时触发，只要 DOM 中项目的顺序发生变化，即使用户没有放开他们正在移动的项目。 update 在用户更改可排序元素的顺序后 触发。