后端更新失败时如何恢复jQuery Sortable元素至原位置？

我使用jQuery Sortable实现了元素在列表间的拖拽移动，拖拽时会同步更新数据库。现在需要实现：若后端更新失败，将元素恢复至拖拽前的原始位置。现有代码片段如下：

$(".connectedSortable").on("sortreceive", function (event, ui) {
    //fetch the data to the API
    if(data.status==200){
        //fetch was successful
    }else{
        //fetch failed
        //rollback to original position                     
    }
});

解决方案 #

要实现失败回滚，核心是在拖拽开始时记录元素的原始位置信息，后续请求失败时据此恢复：

1. 监听sortstart事件，保存元素的原始父容器和索引：

let originalParent, originalIndex;

$(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    start: function(event, ui) {
        // 记录拖拽前的父容器与元素索引
        originalParent = ui.item.parent();
        originalIndex = ui.item.index();
    }
});

2. 在sortreceive回调中处理请求失败的回滚逻辑：

$(".connectedSortable").on("sortreceive", function (event, ui) {
    // 替换为你的实际API请求逻辑
    fetch('/your-update-api', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            // 传递必要的拖拽数据，比如元素ID、新位置等
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.status !== 200) {
            // 后端更新失败，恢复元素至原始位置
            ui.item.detach().insertBefore(originalParent.children().eq(originalIndex));
            // 刷新Sortable组件，确保UI与状态同步
            $(".connectedSortable").sortable("refresh");
        }
        // 请求成功的逻辑保留你的原有代码
    })
    .catch(err => {
        // 网络请求失败时同样恢复位置
        ui.item.detach().insertBefore(originalParent.children().eq(originalIndex));
        $(".connectedSortable").sortable("refresh");
        console.error('更新失败:', err);
    });
});

关键说明 #

• sortstart事件触发时记录的原始位置是回滚的唯一依据，必须准确获取
• 使用detach()移除元素而非remove()，可以保留元素的绑定事件与数据
• 调用sortable("refresh")确保Sortable组件重新识别DOM结构，避免后续拖拽异常

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