用Vue3和vuedraggable拖拽后元素位置错乱怎么办

一西西提问于 2026-01-26 15:56:25 阅读 57

交互

最近在用Vue3和vuedraggable做列表拖拽排序，但发现拖拽后元素位置总是显示错乱

比如拖拽第3项到第1位后，视图里显示顺序对了，但实际数据里的selectedItems数组顺序还是原来的

我尝试在onDragEnd里同步了两个数组，但刷新页面后又乱了

这是我的代码片段：



  
    
      {{ item.name }}
    
  



import { ref } from 'vue'
import draggable from 'vuedraggable'

const items = ref([{id:1,name:'A'}, {id:2,name:'B'}, {id:3,name:'C'}])
const selectedItems = ref([...items.value])

const onDragEnd = () => {
  items.value = [...selectedItems.value]
  console.log('items:', items.value)
  console.log('selectedItems:', selectedItems.value)
}

控制台显示两个数组确实同步了，但页面刷新后又回到原始顺序，是哪里没处理好吗？

我来解答赞 6 收藏

反馈

2 条解答

a'ゞ芳宁 Lv1

嗯，这是个常见的问题，拖拽排序后数据没持久化导致的。你说刷新后回到原始顺序，说明你还没把最新的排序结果存到后台数据库里。

WordPress老玩家来支招：你需要在onDragEnd里发个Ajax请求，把新的顺序传给后端保存起来。比如用WP REST API来处理。

先改你的onDragEnd方法：

const onDragEnd = () => {

  items.value = [...selectedItems.value]

  

  // 发送Ajax请求

  fetch('/wp-json/yournamespace/v1/save-order', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ order: selectedItems.value.map(item => item.id) })

  }).then(response => response.json())

     .then(data => console.log('Order saved:', data))

}

然后在主题里加个自定义REST路由：

add_action('rest_api_init', function () {

  register_rest_route('yournamespace/v1', '/save-order', [

    'methods' => 'POST',

    'callback' => function ($request) {

      $order = $request->get_param('order');

      // 这里根据$order更新你数据库里的顺序

      return rest_ensure_response(['status' => 'success']);

    }

  ]);

});

最后记得刷新页面时从后端拉取正确的顺序。这样就彻底解决了！

拖了这么久终于说清楚了，希望这次能帮你搞定这个问题。

2026-02-01 23:06

书生シ诺曦 Lv1

你这个问题挺常见的，主要是因为你在前端做了排序，但这个排序状态没有持久化到后端或者本地存储里，所以刷新页面后又回到原始顺序了。

### 问题分析
1. items 和 selectedItems 的确在拖拽结束后同步了，但这只是内存层面的操作。
2. 页面刷新后，Vue 实例会重新初始化，数据又从初始值加载了，之前的排序状态就没了。

### 解决方法
要想刷新后保持排序，你需要把排序后的结果保存下来。有几种方式：

#### 方法一：保存到本地存储
最简单的方式是用 localStorage 或 sessionStorage 把排序后的数组存起来，刷新时再读取。

修改你的代码如下：

import { ref, onMounted } from 'vue'

import draggable from 'vuedraggable'



const items = ref([])

const selectedItems = ref([])



// 页面加载时从本地存储读取

onMounted(() => {

  const savedItems = localStorage.getItem('sortedItems')

  if (savedItems) {

    selectedItems.value = JSON.parse(savedItems)

    items.value = [...selectedItems.value]

  } else {

    items.value = [{id:1,name:'A'}, {id:2,name:'B'}, {id:3,name:'C'}]

    selectedItems.value = [...items.value]

  }

})



const onDragEnd = () => {

  items.value = [...selectedItems.value]

  // 拖拽结束后保存到本地存储

  localStorage.setItem('sortedItems', JSON.stringify(selectedItems.value))

  console.log('items:', items.value)

  console.log('selectedItems:', selectedItems.value)

}

这样每次拖拽完成后都会把最新的排序存到 localStorage，刷新页面时再读取。

#### 方法二：保存到后端
如果需要多设备同步或者更可靠的持久化，可以把排序后的结果发给后端保存。比如通过 API 更新数据库里的排序字段。

大概的逻辑是：
1. 在 onDragEnd 里调用后端接口，传入排序后的数组。
2. 后端接收到数据后更新数据库中的排序信息。
3. 刷新页面时从后端重新拉取排序后的数据。

示例代码：

const onDragEnd = async () => {

  items.value = [...selectedItems.value]

  try {

    await fetch('/api/update-sort', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ items: selectedItems.value })

    })

    console.log('排序已保存到后端')

  } catch (e) {

    console.error('保存失败:', e)

  }

}

具体实现要看你的后端接口设计，但核心就是要把排序状态持久化。

### 总结
简单需求可以用本地存储解决，复杂场景建议结合后端。别忘了刷新时要重新加载持久化的数据，不然还是会回到初始状态。开发中这种问题很常见，关键就是要明白内存数据和持久化数据的区别。

2026-01-28 23:03