@composy/drag-and-drop-vue

@composy/drag-and-drop-vue

Vue 3 适配层，为拖拽核心提供排序容器、列表项、组合式函数、指令和插件。支持 Vue ^3.3.0。

安装

pnpm add @composy/drag-and-drop-vue vue

核心引擎由 Vue 包作为运行时依赖安装。入口会加载组件样式；颜色、间距、字体大小和圆角使用 LDesign 的 --ld-* CSS 变量。

组件

<script setup lang="ts">
import type { SortChangeEvent } from '@composy/drag-and-drop-vue'
import { DragContainer, DragItem } from '@composy/drag-and-drop-vue'
import { ref } from 'vue'

const items = ref([
  { id: 'design', label: '完成设计' },
  { id: 'build', label: '实现功能' },
])

function handleSort(event: SortChangeEvent) {
  console.info(event.oldIndex, event.newIndex)
}
</script>

<template>
  <DragContainer v-model="items" direction="vertical" :keyboard="true" @sort-change="handleSort">
    <DragItem v-for="item in items" :key="item.id">
      {{ item.label }}
    </DragItem>
  </DragContainer>
</template>

DragContainer 支持 vertical、horizontal 和 grid 排列、group、items、handle、disabled 选择器、触摸/键盘选项以及 v-model。组件 expose 提供 getInstance()、enable()、disable()、 cancel() 和 getOrder()；DragItem 支持 tag、disabled 和 itemClass。

组合式函数

• useSortable(options)：管理一个核心 DragManager 实例，可传入 containerRef 和响应式 modelValue，并返回 enable、disable、cancel、destroy。
• useDrag(options)：使单个元素支持 Pointer Events 拖动，并返回 dragRef、isDragging 和位移 position，以及可取消 pending/active 拖动的 cancel()。
• useDrop(options)：使用原生 HTML Drag and Drop API 创建放置区域，accept 可按 MIME 类型过滤。
• useDragAndDrop(options)：创建和管理完整引擎实例，并提供 cancel 和生命周期清理。

指令与插件

包导出 vSortable、vDraggable、DragAndDropPlugin 和 createDragAndDropEnginePlugin。可按需导入这些导出，也可以直接使用组件。

验证

corepack pnpm --dir libraries/drag-and-drop/packages/vue run type-check
corepack pnpm --dir libraries/drag-and-drop/packages/vue run type-check:cjs
corepack pnpm --dir libraries/drag-and-drop/packages/vue exec vitest run --config vitest.config.ts
corepack pnpm --dir libraries/drag-and-drop/packages/vue run lint:check
corepack pnpm --dir libraries/drag-and-drop/packages/vue run build

Builder、ESLint 与 ESM/CJS TypeScript 权威配置位于 .ldesign/；包根旧配置文件仅作兼容入口。

MIT License.