JQuery отсутствует элемент dropbable

Question

Я пытаюсь создать сортируемый список. Заказ должен быть сохранен в базе данных. Проблема: пропущенный элемент всегда отсутствует в массиве.

HTML:

<ul id="sortable">
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
  <li id="5">5</li>
  <li id="6">6</li>
  <li id="7">7</li>
  <li id="8">8</li>
</ul>

JS:

    $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable li" ).droppable({
        drop: function() {
            var order = $("#sortable").sortable( "toArray",{ key: "id" } );
            console.log(order);

            $.ajax({
                    type: "POST",
                    url: "order.php",
                    data: {x: order},
                    success: function(response){
                        console.log(response);
                    }
           });
        }
    });
});

Вот что такое console.logs, если я перетаскиваю элемент с id = 7:

Array(7) [ "1", "2", "3", "4", "5", "6", "8" ]

PHP ответ:

    Array
(
    [0] => 1
    [1] => 2
    [2] => 3
    [3] => 4
    [4] => 5
    [5] => 6
    [6] => 8
)

Answer 1

Простое решение: я просто добавляю задержку перед сериализацией.