Vue 3中的拖拽排序：解决vuedraggable重置问题

在使用Vue 3开发项目时，经常会遇到需要对列表元素进行拖拽排序的需求。vuedraggable是一个非常好用的库，它基于Sortable.js，为Vue应用提供了拖拽功能。然而，在实际应用中，用户可能遇到拖拽后元素无法保持新位置的问题。本文将通过一个实例，详细讲解如何在Vue 3中解决这个问题。

问题描述

假设我们有一个邮件线程的应用，其中包含不同的功能特性（Features），这些特性可以按照类型分组，每组特性可以拖拽排序。然而，用户在拖拽特性后，释放鼠标时元素会回到原来的位置。

代码实例

首先，我们看一下初始的代码结构：

<template> <v-expansion-panels> <v-expansion-panel v-for="feature in groupedFeatures" :key="feature.type"> <v-expansion-panel-title> <div>{ { translateFeatureType(feature.type) }}</div> </v-expansion-panel-title> <v-expansion-panel-text> <draggable v-model="feature.details" group="featureGroup" item-key="model_name">