基础用法

本节将介绍 vue3-drag-directive 的基本用法和配置选项。通过示例，你将了解如何快速使用列表拖拽功能。

基本示例

以下是一个更直观的九宫格拖拽演示，展示了如何在网格布局中实现拖拽排序：

九宫格

可以拖拽九宫格中的任意方块 - 颜色固定不变

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

item-9

指令参数详解

v-drag-list 指令接受一个对象作为参数，该对象可以包含以下属性：

属性	类型	必填	默认值	描述
list	Array	是	-	要拖拽的列表数据
canDrag	Boolean	否	true	是否启用拖拽功能
dragItemClass	String	否	'app-item'	可拖拽项的类名

事件

事件名	描述	回调参数
drag-mode-start	拖拽开始时触发	拖拽开始的事件对象
drag-mode-end	拖拽结束时触发	包含最新列表数据 updatedData 和拖拽项 draggedItemData 的事件对象

示例：

<template>
  <ul
    v-drag-list="{ list }"
    @drag-mode-start="onDragStart"
    @drag-mode-end="onDragEnd"
  >
    <li v-for="item in list" :key="item.id" :data-id="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
const onDragStart = () => {
  console.log('拖拽开始');
};

const onDragEnd = (event) => {
  const { updatedData, draggedItemData } = event.detail;
  console.log('拖拽结束', updatedData);
  console.log('被拖拽的项目', draggedItemData);
};
</script>

样式定制

拖拽指令会自动为正在拖拽的元素添加 vue-drag-list-directive__dragging 类，你可以通过 CSS 来自定义拖拽元素的样式：

/* 拖拽中的元素 */
.vue-drag-list-directive__dragging {
  opacity: 0.5;
  background-color: transparent;
}

注意事项

1. 数据项必须有唯一 ID：每个列表项必须有一个唯一的 id 属性，用于跟踪拖拽操作。

2. DOM 元素需要 data-id 属性：对应的 DOM 元素需要设置 data-id 属性，其值应与数据项的 id 相匹配。

3. 响应式更新：当列表数据发生变化时，拖拽功能会自动重新初始化。

4. 性能考虑：对于非常长的列表（如超过 1000 项），可能需要考虑虚拟滚动等优化措施。

在下一节中，我们将探讨高级用法，包括嵌套列表、横向拖拽等更复杂的场景。