更新记录

1.0.0（2025-12-15）

列表 拖拽 排序 禁止拖动 等

平台兼容性

uni-app(4.42)

uni-app x(4.42)

其他

hf-dragsort

Uni-App 拖拽排序组件，支持禁用项、自定义样式和多平台兼容。

功能特性

• ✅ 支持拖拽排序
• ✅ 支持禁用特定项
• ✅ 支持自定义高度和间距
• ✅ 支持长按触发（可配置时长）
• ✅ 支持震动反馈
• ✅ 适配多平台（H5、小程序、App）
• ✅ 自动滚动到可视区域
• ✅ 支持自定义内容插槽

安装方法

方式一：插件市场安装

在 Uni-App 插件市场搜索 hf-dragsort 进行安装。

方式二：本地导入

将插件目录复制到项目的 uni_modules 或 components 目录下。

使用示例

基础用法

<template>
  <view class="container">
    <hf-dragsort
      :list="dataList"
      :height="400"
      :rowHeight="80"
      :rowGap="10"
      @change="handleChange"
      @confirm="handleConfirm"
    >
      <template #default="{ item, index }">
        <view class="item-content">
          <text class="item-index">{{ index + 1 }}</text>
          <text class="item-name">{{ item.name }}</text>
          <u-icon name="arrow-move" size="20" color="#ccc" />
        </view>
      </template>
      <template #shadow="{ item }">
        <view class="shadow-content">{{ item.name }}</view>
      </template>
    </hf-dragsort>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const dataList = ref([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' },
  { id: 3, name: '项目3', disabled: true }, // 禁用项
  { id: 4, name: '项目4' }
])

function handleChange(newList) {
  console.log('排序中：', newList)
}

function handleConfirm({ list, from, to }) {
  console.log('排序完成：', list, '从', from, '到', to)
}
</script>

参数说明

事件说明

插槽说明

平台兼容性

注意事项

1. 数据源中的每个对象必须包含唯一的 id 属性
2. 禁用项需设置 disabled: true（可通过 disabledKey 自定义属性名）
3. 建议在 handleConfirm 事件中保存最终排序结果
4. 长按时长建议设置在 300-500ms 之间，过长影响体验

更新日志

v1.0.0 (2024-01-01)

• 🎉 初始版本发布
• ✅ 支持拖拽排序功能
• ✅ 支持禁用项设置
• ✅ 支持自定义样式
• ✅ 多平台兼容

License