更新记录

1.0.0（2026-10-29） 下载此版本

特性

• 按住左侧手柄即拖，跟手换位
• v-model 双向绑定列表
• 支持 locked 锁定行（不可拖、不可被挤占）
• 仅手柄拦截触摸，不影响页面滚动
• 插槽自定义行内容
• 适配微信小程序 / App / H5（以真机手势为准）

平台兼容性

uni-app(4.57)

uni-app x(3.8.7)

burt-drag-sort

uni-app（Vue3）通用列表 拖拽排序 组件。

按住左侧手柄上下拖即可换序；内容区可正常滚动；支持锁定行；松手后列表顺序与数据一致。

特性

• 按住左侧手柄即拖，跟手换位
• v-model 双向绑定列表
• 支持 locked 锁定行（不可拖、不可被挤占）
• 仅手柄拦截触摸，不影响页面滚动
• 插槽自定义行内容
• 适配微信小程序 / App / H5（以真机手势为准）

目录

burt-drag/
├── components/
│   └── burt-drag-sort/
│       └── burt-drag-sort.vue   # 组件本体（拷贝这一个文件即可使用）
├── pages/
│   └── index/
│       └── index.vue           # Demo（含 mock 数据）
└── README.MD

安装

方式一：插件市场导入

通过 DCloud 插件市场导入本插件后，组件位于：

components/burt-drag-sort/burt-drag-sort.vue

方式二：手动拷贝

将 components/burt-drag-sort 目录复制到你的 uni-app 项目的 components 下即可。

Vue3 + easycom 默认规则下，可直接在页面中使用标签 <burt-drag-sort>；也可手动 import。

基础用法

<template>
  <burt-drag-sort
    v-model="list"
    item-key="id"
    :row-height-px="56"
    @reorder="onReorder"
  >
    <template #default="{ item, index, locked }">
      <view class="row">
        <text>{{ index + 1 }}. {{ item.name }}</text>
      </view>
    </template>
  </burt-drag-sort>
</template>

<script setup>
import { ref } from 'vue'
// 若未开启 easycom，取消下一行注释：
// import BurtDragSort from '@/components/burt-drag-sort/burt-drag-sort.vue'

const list = ref([
  { id: 1, name: '约会' },
  { id: 2, name: '居家' },
  { id: 3, name: '度假' },
  { id: 4, name: '通勤' },
])

function onReorder({ list, from, to }) {
  // 在这里请求后端保存顺序
  console.log('new order', from, to, list.map((i) => i.id))
}
</script>

锁定行

<burt-drag-sort
  v-model="list"
  item-key="id"
  :locked="(item) => !!item.isSystem"
  @reorder="onReorder"
>
  <template #default="{ item, locked }">
    <text>{{ item.name }}{{ locked ? '（锁定）' : '' }}</text>
  </template>
</burt-drag-sort>

锁定行：

• 左侧无拖动手柄
• 不能被其它行拖入其位置挤占（组件内部会钉回原下标）

API

Props

Events

拖动过程中不会频繁回写父级；仅在松手且顺序确实变化时触发一次。

Slot

默认插槽参数：

注意事项

1. 只在手柄上拖，在文字/开关区域滑动用于滚页面。
2. 列表项请保证 itemKey 对应字段唯一且稳定。
3. 微信小程序建议真机验证拖动手势；开发者工具手势与真机可能不一致。
4. 行高差异较大时，可把 row-height-px 调接近真实高度，起拖会更跟手（组件也会测量相邻行间距）。
5. 组件自带白色圆角卡片样式；如需完全自定义外框，可改组件内 .dsl__row 样式，或在插槽内铺满内容。

Demo

运行本示例项目，打开 pages/index/index：

1. 基础排序：拖动场合标签，下方展示实时顺序文案
2. 锁定行：「未分类」不可拖
3. 长列表滚动：16 条渠道，验证页面可滚、手柄可拖

兼容性

License

MIT（免费，可商用）