拖拽字段时数组排序异常：首个元素移动位置错误求助

核心原因 #

你遇到的问题本质是拖拽停止事件（dragstop）触发时机过早——当dragstop触发时，拖拽插件还未完成DOM节点的最终重排，导致你读取到的是未更新的DOM顺序，尤其是移动第一个元素时，DOM位置的变更延迟更明显。

具体修复步骤 #

1. 替换为正确的排序完成事件

如果使用的是jQuery UI Sortable插件，不要用dragstop，改用sortupdate事件——这个事件是在排序操作完全结束、DOM节点已经完成重排后才触发的，能保证读取到正确的元素顺序：

// 注意：要绑定到拖拽容器上，而非单个可拖拽元素
$('body').on('sortupdate', '.draggable-container', function(e, ui) {
    var arr = [];
    // 精准选择容器内的可拖拽元素，避免无关元素干扰
    $('.draggable-container .draggable').each(function(){
        var fieldId = $(this).data('fieldid');
        if (typeof fieldId !== 'undefined') {
            arr.push(fieldId);
        }       
    })      
    console.log(arr);       

    var vars = {    
        url : domain + '/core/ajax/profile.php',
        form: 'fieldorder', 
        profileid : $(this).attr('data-value'), 
        order: arr      
    };
    datahandle(vars);
});

注：需要把.draggable-container替换成你实际的拖拽容器选择器，比如包裹所有.draggable元素的父div的类名。

2. 排查选择器与元素准确性

• 确认.draggable选择器没有匹配到页面上其他无关元素，否则会混入无效的fieldid导致顺序错乱。
• 在each循环中临时打印每个元素的data-fieldid，验证是否和预期一致：

$('.draggable-container .draggable').each(function(){
    console.log($(this).data('fieldid')); // 检查每个元素的fieldid是否正确
    // ... 原有代码
})

3. 自定义拖拽场景的处理

如果是自己实现的拖拽逻辑，需要确保DOM节点的插入/移动操作完全完成后，再执行读取顺序的代码。比如在拖拽结束的回调中，先完成元素的位置调整，再调用读取数组的逻辑，避免异步DOM操作导致的顺序错误。

测试验证 #

• 替换事件后，测试移动首个元素、将元素移到首位的场景，确认数组顺序是否符合预期。
• 如果仍有问题，尝试在读取顺序前添加稍长的延迟（比如500ms）验证是否是DOM更新延迟：

$('body').on('dragstop', '.draggable', function(e) {
    setTimeout(function(){
        var arr = [];
        $('.draggable-container .draggable').each(function(){
            var fieldId = $(this).data('fieldid');
            if (typeof fieldId !== 'undefined') {
                arr.push(fieldId);
            }       
        })      
        console.log(arr);
        // ... 后续提交代码
    }, 500);
});

如果延迟后顺序正确，说明必须使用插件提供的排序完成事件，而不是依赖dragstop。

内容的提问来源于stack exchange，提问作者Dorvalla