vue-draggable-next

Vue-Draggable-NEXT 是一个针对 Vue.js 的下一代官方推荐的拖拽组件，它是 Vue Core 提供的 Vue-Draggable 的升级版本，基于原生 Web Components 技术构建。相较于之前的版本，Vue-Draggable-NEXT 提供了更好的性能、更现代的 API 设计和更多的特性，比如响应式列表、自动滚动容器等，使得复杂的拖拽场景变得更加简单易用。

安装 Vue-Draggable-NEXT 可以通过 npm 或 yarn 安装：

npm install @vue-draggable/draggable-next
# 或者
yarn add @vue-draggable/draggable-next

然后在 Vue 项目中使用它：

<template>
  <draggable-next v-model="items" :options="{ group: 'group1' }"></draggable-next>
</template>

<script>
import draggableNext from '@vue-draggable/draggable-next';

export default {
  components: {
    draggableNext,
  },
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，`v-model` 表示绑定的数据源，`:options` 属性用于配置拖拽选项。

Vue-Draggable-NEXT 具有丰富的事件系统，例如 `@start`, `@end`, `@update` 等，可以方便地监听和定制拖放过程。