vue-draggable-next事件

### Vue Draggable Next 事件使用方法

Vue Draggable Next 提供了一系列用于处理拖放操作的事件，这些事件允许开发者监听并响应各种交互行为。以下是常用的几种事件及其说明：

#### 基本事件介绍

- **start**: 当用户开始拖动元素时触发。
- **end**: 用户停止拖动（释放鼠标按钮或触摸结束）时触发。
- **add**: 将新项添加到列表中时触发。
- **remove**: 移除某一项时触发。
- **update**: 列表顺序发生变化时触发。

每种事件都携带特定的数据对象作为参数传递给回调函数，这使得可以获取当前状态和其他有用的信息[^1]。

#### 示例代码展示

下面是一个简单的例子来演示如何绑定上述提到的一些基本事件至 `vuedraggablenext` 组件上，并打印相应的日志消息以便观察其工作情况:

<template>
  <draggable @start="onStart" @end="onEnd" @add="onAdd" @remove="onRemove" @update="onUpdate">
    <!-- 子组件 -->
  </draggable>
</template>

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

const onStart = (event: any): void => {
  console.log('Drag started', event);
};

const onEnd = (event: any): void => {
  console.log('Drag ended', event);
};

const onAdd = (event: any): void => {
  console.log('Item added', event);
};

const onRemove = (event: any): void => {
  console.log('Item removed', event);
};

const onUpdate = (event: any): void => {
  console.log('List updated', event);
};
</script>

此示例展示了如何通过监听不同类型的事件来自定义逻辑处理程序，在实际开发过程中可以根据需求调整具体的实现方式。