更新记录

1.0.1（2025-12-24） 下载此版本

修复兼容

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

首次发布

平台兼容性

uni-app(4.87)

uni-app x(4.87)

jia-drag 拖拽排序组件

jia-drag 是一款专为 uni-app 开发的高性能拖拽排序组件。它基于内置的 movable-area 和 movable-view 实现

特性

• 🚀 高性能：利用原生组件实现，动画流畅不卡顿。
• 📦 开箱即用：支持 Vue 2 和 Vue 3 (Composition API / script setup)。
• 🎨 灵活定制：支持插槽自定义内容，满足多样化 UI 需求。
• 🛠️ 功能丰富：支持长按触发、阻尼设置、摩擦力调整、动画开关。

使用示例 (Vue 3)

<template>
  <view class="container">
    <jia-drag
      v-model="list"
      itemKey="id"
      itemHeight="100rpx"
      @end="handleDragEnd"
    >
      <template #item="{ element, index }">
        <view class="drag-item">
          <text>{{ index + 1 }}. {{ element.name }}</text>
        </view>
      </template>
    </jia-drag>
  </view>
</template>

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

const list = ref([
  { id: '1', name: '苹果' },
  { id: '2', name: '香蕉' },
  { id: '3', name: '西瓜' },
  { id: '4', name: '葡萄' }
]);

const handleDragEnd = (newList) => {
  console.log('排序后的列表:', newList);
};
</script>

<style scoped>
.drag-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
}
</style>

API

Props

Events

Slots

[!IMPORTANT] 微信小程序兼容性说明：由于微信小程序对作用域插槽 (Scoped Slot) 的性能或实现限制，当在微信小程序环境下运行时，组件会回退到默认渲染模式（直接显示 item[itemKey] 的内容）。对于其他平台（H5, App 等），支持完整的插槽自定义。

注意事项

1. 唯一标识：请务必提供正确的 itemKey，且对应的数据必须是唯一的，否则会导致排序错乱。
2. 样式建议：建议给 drag-item 设置背景色，否则在拖拽过程中背景可能是透明的。
3. 滚动冲突：如果页面本身有滚动条，建议开启 longpress 参数，以避免拖拽操作与页面滚动混淆。

如果在使用过程中遇到任何问题，欢迎提出意见！