更新记录

1.0.0（2025-12-01） 下载此版本

• 初始版本发布
• 支持基本的拖拽排序功能
• 支持 H5 和微信小程序

平台兼容性

其他

DragSortable 拖拽排序组件

简介

DragSortable 是一个支持多端（H5 和小程序）的 Vue 3 拖拽排序组件，基于 UniApp 框架开发。它允许用户通过拖拽的方式重新排列列表项，并提供了丰富的事件回调来满足不同的业务需求。

功能特性

• 支持 H5 和微信小程序等多端运行
• 流畅的拖拽体验
• 可自定义列表项内容
• 提供拖拽开始、移动、结束等事件回调
• 支持禁用拖拽功能
• 自动处理元素位置计算

使用方法

安装

将 DragSortable 组件文件夹复制到您的项目中相应的位置。

引入组件

或者在 script setup 中动态导入：

import DragSortable from '@/components/DragSortable/index.vue'

基本用法

<template>
  <DragSortable 
    ref="dragSortableRef" 
    :instance="dragSortableRef"
    v-model:items="listData" 
    @drag-start="Start" 
    @drag-move="Move" 
    @drag-end="End">
    <template #default="{ item, index }">
      <view>{{ item.name }}</view>
    </template>
  </DragSortable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DragSortable from '@/components/DragSortable/index.vue'

// 拖拽组件实例引用 必须在父组件外边定义 否则拖拽组件的元素位置信息获取不到
const dragSortableRef = ref()

const listData = ref([
  { name: '项目1' },
  { name: '项目2' },
  { name: '项目3' }
])

const Start = ({ item, index }) => {
  console.log('开始拖拽:', item, index)
}

const Move = ({ item, fromIndex, toIndex }) => {
  console.log('拖拽移动:', item, fromIndex, toIndex)
}

const End = ({ item, index }) => {
  console.log('拖拽结束:', item, index)
}
</script>

属性 (Props)

事件 (Events)

插槽 (Slots)

注意事项

1. 在小程序环境中，组件会自动使用正确的事件处理方式（touch 事件），而在 H5 环境中则使用 mouse 事件。
2. 为了确保组件能够正确获取元素位置信息，请确保在组件挂载后有足够的时间进行初始化。
3. 如果遇到"无法获取组件实例"的错误，请检查组件是否正确挂载。

更新日志

v1.0.0

• 初始版本发布
• 支持基本的拖拽排序功能
• 支持 H5 和微信小程序