如何移动数组元素且仅更新受影响对象的sort属性？

核心逻辑 #

当元素通过拖拽从oldIndex移动到newIndex时，只有两类元素的sort值需要修改：

• 被移动的目标元素本身
• 位于原位置与新位置之间的所有元素

具体调整规则：

• 向前移动（newIndex < oldIndex）：中间元素的sort值加1，被移动元素的sort设为newIndex
• 向后移动（newIndex > oldIndex）：中间元素的sort值减1，被移动元素的sort设为newIndex

这种方式能精准定位需要更新的元素，避免全量更新数组，大幅减少数据库写入次数。

具体实现代码 #

以下是基于VueDraggable onChange事件的处理函数示例：

// 原始数据数组
const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 1 },
    { id: 2, title: 'Object 3', sort: 2 },
    { id: 3, title: 'Object 4', sort: 3 },
    { id: 4, title: 'Object 5', sort: 4 },
    { id: 5, title: 'Object 6', sort: 5 },
    { id: 6, title: 'Object 7', sort: 6 },
    { id: 7, title: 'Object 8', sort: 7 },
    { id: 8, title: 'Object 9', sort: 8 }
];

// 处理拖拽变更的事件函数
function handleDragChange({ element, oldIndex, newIndex }) {
    const updatedElements = [];

    // 1. 更新被移动元素的sort值
    element.sort = newIndex;
    updatedElements.push({ ...element }); // 浅拷贝避免修改原数组引用

    // 2. 处理中间元素的sort调整
    if (newIndex < oldIndex) {
        // 向前移动：遍历newIndex到oldIndex-1的元素，sort+1
        for (let i = newIndex; i < oldIndex; i++) {
            const targetItem = items[i];
            targetItem.sort += 1;
            updatedElements.push({ ...targetItem });
        }
    } else if (newIndex > oldIndex) {
        // 向后移动：遍历oldIndex+1到newIndex的元素，sort-1
        for (let i = oldIndex + 1; i <= newIndex; i++) {
            const targetItem = items[i];
            targetItem.sort -= 1;
            updatedElements.push({ ...targetItem });
        }
    }

    // 批量将updatedElements提交到数据库更新即可
    console.log('需写入数据库的元素:', updatedElements);
}

进阶优化方案（推荐） #

如果允许自定义sort字段的规则，可以采用非连续间隔值的方式，实现仅更新被移动元素的极致优化：

思路 #

1. 初始化时给每个元素的sort设置间隔较大的数值（比如index * 10），例如0, 10, 20, 30...
2. 拖拽移动时，取目标位置前后元素的sort中间值作为新元素的sort（无需调整其他元素）

代码示例 #

// 初始化非连续sort的数组
const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 10 },
    { id: 2, title: 'Object 3', sort: 20 },
    { id: 3, title: 'Object 4', sort: 30 },
    // ... 后续元素依次递增10
];

function handleDragChange({ element, newIndex }) {
    const prevItem = items[newIndex - 1];
    const nextItem = items[newIndex + 1];
    let newSort;

    if (!prevItem) {
        // 移动到第一个位置：取后一个元素的sort减10
        newSort = nextItem.sort - 10;
    } else if (!nextItem) {
        // 移动到最后一个位置：取前一个元素的sort加10
        newSort = prevItem.sort + 10;
    } else {
        // 取前后元素sort的中间值（支持整数或小数）
        newSort = Math.floor((prevItem.sort + nextItem.sort) / 2);
    }

    element.sort = newSort;
    // 仅需将该元素提交到数据库更新
    console.log('需写入数据库的元素:', { ...element });
}

这种方案的优势是每次拖拽仅需1次数据库写入，完全避免了批量更新，适合对性能要求较高的场景。唯一需要注意的是，当多次拖拽导致间隔耗尽时，可以重新初始化所有元素的sort值（比如再次按index*10重置）。

内容的提问来源于stack exchange，提问作者Cyril N.