更新记录

1.0.9（2026-03-16）

新增功能

• 支持任意方向拖动（水平/垂直）
• 支持在 scroll-view 中拖拽排序

初始版本

• 基础拖拽排序功能
• 支持自定义拖拽手柄
• 支持微信小程序、H5、uniApp-X 等平台
• 可选震动反馈功能（微信小程序端）
• 完整的使用文档和示例代码

1.0.3（2026-03-16）

新增功能

1.0.2（2026-03-16）

新增功能

平台兼容性

uni-app(3.7.0)

uni-app x(3.7.0)

其他

aura-draggable-sort

一款基于 uni-app 的可拖拽排序组件，支持自定义拖拽手柄和列表项样式，提供流畅的拖拽体验。已支持微信小程序、H5、uniApp-X 等平台。

安装说明

1. 在 uni-app 插件市场搜索并导入 aura-draggable-sort 插件
2. 导入后即可在任意页面直接使用，无需手动 import

快速上手

基本使用

<template>
  <aura-draggable-sort
    v-model:list="activeCategories"
    :itemHeight="64"
    :vibrate="false"
    @change="handleSortChange"
  >
    <aura-draggable-sort-item
      v-for="(item, index) in activeCategories"
      :key="item.value"
      :index="index"
    >
      <!-- 自定义列表项内容 -->
      <view class="list-item-inner">
        <view class="glass-panel category-row">
          <view class="row-left">
            <view
              class="icon-box"
              :style="{
                backgroundColor: item.color != '' ? item.color : themeColor,
              }"
            >
              <text class="msr">🎨</text>
            </view>
            <text class="cat-name">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 自定义拖拽手柄 -->
      <template #handle>
        <view class="default-handle">
          <view class="line"></view>
          <view class="line"></view>
          <view class="line"></view>
        </view>
      </template>
    </aura-draggable-sort-item>
  </aura-draggable-sort>
</template>

<script setup lang="uts">
import { ref } from "vue";

const activeCategories = ref([
  { label: "购物", value: "1", color: "#FFD54F" },
  { label: "交通", value: "2", color: "#4FC3F7" },
  { label: "居住", value: "3", color: "#A8E063" },
]);

const handleSortChange = (newList) => {
  console.log("新的排序结果:", newList.map(i => i.label));
  uni.showToast({ title: "排序已保存", icon: "none" });
};
</script>

Props

Events

插槽

默认插槽

用于自定义列表项的内容，每个 aura-draggable-sort-item 内部的默认内容。

handle 插槽

用于自定义拖拽手柄的样式，每个 aura-draggable-sort-item 内部的 #handle 插槽。

示例样式

/* 默认的汉堡菜单图标样式 */
.default-handle {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.default-handle .line {
  width: 32rpx;
  height: 4rpx;
  background-color: #999;
  border-radius: 4rpx;
}
/* 列表项自定义内容样式 */
.list-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.category-row {
  width: 100%;
  height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  backdrop-filter: blur(20rpx);
  border-radius: 32rpx;
}

注意事项

1. 确保每个列表项都有唯一的 key 属性，可传入id等唯一标识
2. aura-draggable-sort-item 必须传入 index 属性
3. 拖拽过程中会自动添加 ghost-style 类名到拖拽元素上，可以通过该类名自定义拖拽时的样式

完整示例

请参考项目中的 pages/index/index.uvue 文件，查看完整的使用示例。