插件地址:https://github.com/SortableJS/vue.draggable.next

    将拖放功能添加到 Vue.js 应用可以改善用户体验。因为拖放功能允许用户以更直观的方式与应用程序交互，所以用户可以更轻松地组织和操作数据。Vue-draggable 是实现拖放功能的绝佳工具，因为它简化了流程，即使是刚接触 Vue.js 的开发人员也可以轻松使用。将这个插件添加到 Vue.js 应用程序，你就可以创建更具吸引力和动态的用户体验，提高用户回头率。

我使用 这个 腾讯云 tdesign 的web端框架来演示这个问题

安装

npm i -S vuedraggable@next

使用这个页面上的内容 给大家演示这个东西 

目前只有这个代码 

引入使用

import draggable from 'vuedraggable'

<template>
  <div>
    <draggable v-model="cars" group="people" @start="drag = true" @end="drag = false" item-key="id">
      <template #item="{ element }">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import draggable from 'vuedraggable';

const drag = ref(false);

const cars = ref(['Mercedes', 'Toyota', 'Honda', 'Dodge']);
</script>

<style scoped>
.row-container:not(:last-child) {
  margin-bottom: 16px;
}
</style>