jQuery可排序连接列表并不总是序列化数据

Question

我正致力于连接各种可排序的小部件，您可以在列表之间移动小部件并对其进行排序。问题是，偶尔序列化将返回null，但将同一对象再次拖到另一个列表将返回一些数据。

// Handle the sorting of containers
let sortableConf = {
    handle: "> .edit-active-hide .sort-handle",
    items: "> div:not(.edit-active-hide)",
    stop: function (event, ui) {
        let data = $(this).sortable('serialize');

        console.log('data', data);
        data = data + '&parent-id=' + $(this).attr('data-layout-element-parent-id');

        console.log('this', $(this));

        axios.post('/layout/elements/sort', data)
            .then(response => {
                console.log('Response', response);
            })
    },
    start: function (e, ui) {
        ui.placeholder.height(ui.item.height());
    },
    placeholder: "ui-state-highlight"
};

$(".sort-page-containers").sortable(sortableConf);

//Handle widgets, we want to connect with other widget lists for awesomeness
sortableConf.connectWith = '.sort-page-content';

$(".sort-page-content").sortable(sortableConf);

可能会发生三件事

• 可以返回正确的数据
• 它可以返回null
• 当列表中有多个时，它有时只返回一个id。

注意事项

• 每个元素都有唯一的ID
• 当移出空列表时，它主要返回null，例如将项目移动到空列表将返回数据，但将其移出将不返回任何数据，再次移动它将返回数据。