更新记录

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

首次发布

平台兼容性

uni-app(4.85)

zero-drag 通用拖拽排序组件

一个功能强大、灵活易用的拖拽排序组件，支持单列、多列、图片等多种场景

• 🎉 初始发布 zero-drag 通用拖拽排序组件
• 🎯 多模式支持：单列(single)、网格(grid)、图片(image) 三种排序模式
• 🎨 高度自定义：支持自定义内容插槽，满足各种 UI 设计需求
• 🎮 拖拽手柄：单列模式支持拖拽手柄，提供精确的拖拽控制
• ⏱️ 长按拖拽：默认需长按 1 秒触发拖拽，避免与滚动操作冲突
• ⚙️ 灵活配置：支持自定义长按时长、即时拖拽等多种配置
• ➕ 增删功能：内置添加、删除功能，支持自定义删除确认逻辑
• 🖼️ 图片预览：图片模式支持点击预览功能
• 🎭 流畅动画：基于 movable-area/movable-view 实现，动画效果流畅自然
• ⚡ 性能优异：优化的代码结构，轻量高效
• 🔧 Vue 兼容：同时支持 Vue2 和 Vue3

📋 核心功能

拖拽能力

• 长按拖拽机制（可配置时长）
• 即时拖拽模式（编辑模式）
• 拖拽手柄支持（单列模式）
• 自定义拖拽参数（缩放、透明度、阻尼等）

布局模式

• 单列垂直布局
• 网格多列布局
• 图片画廊布局
• 自定义尺寸支持

交互功能

• 添加新项目
• 删除项目（支持确认）
• 拖拽排序
• 图片预览

🎯 使用场景

• ✅ 待办事项排序
• 📅 倒数日管理
• 🖼️ 相册排序
• 📋 自定义列表
• 🎨 网格布局编辑
• 📱 应用图标排序

使用方法

符合easycom组件模式, 导入 uni_modules 后直接使用即可

🚀 快速开始

基础用法 - 图片拖拽排序

<template>
  <zero-drag v-model="imageList" mode="image"></zero-drag>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    }
  }
}
</script>

网格布局拖拽

<template>
  <zero-drag 
    v-model="gridList" 
    mode="grid" 
    :columns="3"
    :deletable="true"
    :addable="true"
    @add="handleAdd"
    @delete="handleDelete">
    <template #default="{ item }">
      <view class="custom-item">
        <text>{{ item.name }}</text>
      </view>
    </template>
  </zero-drag>
</template>

<script>
export default {
  data() {
    return {
      gridList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ]
    }
  },
  methods: {
    handleAdd() {
      this.gridList.push({ 
        id: Date.now(), 
        name: '新项目' 
      })
    },
    handleDelete(index) {
      console.log('删除索引：', index)
    }
  }
}
</script>

单列垂直列表拖拽（带拖拽手柄）

<template>
  <zero-drag
    v-model="todoList"
    mode="single"
    :single-item-height="100"
    :deletable="true"
    :show-drag-handle="true"
    drag-handle-position="left">
    <template #default="{ item, index }">
      <view class="todo-item">
        <text class="todo-title">{{ item.title }}</text>
        <text class="todo-time">{{ item.time }}</text>
      </view>
    </template>
  </zero-drag>
</template>

<script>
export default {
  data() {
    return {
      todoList: [
        { title: '完成报告', time: '2023-12-01' },
        { title: '开会讨论', time: '2023-12-02' },
        { title: '代码审查', time: '2023-12-03' }
      ]
    }
  }
}
</script>

📖 API 文档

Props

Events

Slots

💡 使用技巧

1. 对象数组使用 keyName

如果数据是对象数组，使用 keyName 指定显示字段：

<zero-drag 
  v-model="list" 
  mode="image" 
  keyName="url">
</zero-drag>

<!-- list 数据结构 -->
[
  { id: 1, url: 'xxx.jpg', title: '图片1' },
  { id: 2, url: 'yyy.jpg', title: '图片2' }
]

### 2. 自定义删除确认

```vue
<zero-drag 
  :on-delete="confirmDelete">
</zero-drag>

<script>
methods: {
  confirmDelete(done) {
    uni.showModal({
      content: '确定删除？',
      success: (res) => {
        if (res.confirm) {
          done() // 确认后调用 done 执行删除
        }
      }
    })
  }
}
</script>

3. 拖拽手柄（单列模式专属）

在单列模式下，可以启用拖拽手柄，提供更精确的拖拽控制：

<zero-drag
  v-model="list"
  mode="single"
  :show-drag-handle="true"
  drag-handle-position="left">
  <!-- 内容 -->
</zero-drag>

优点：

• 避免误触发拖拽
• 提供清晰的拖拽入口
• 区分拖拽和点击操作

手柄位置：

• left：手柄在左侧（默认）
• right：手柄在右侧

4. 响应式更新

组件支持双向绑定，直接修改数组即可更新：

// 添加
this.list.push(newItem)

// 删除
this.list.splice(index, 1)

// 修改
this.list[index] = newItem

5. 自定义长按时长

根据实际需求调整长按触发拖拽的时长：

<!-- 快速拖拽：0.5秒 -->
<zero-drag 
  v-model="list"
  :long-press-duration="500">
</zero-drag>

<!-- 默认：1秒 -->
<zero-drag v-model="list"></zero-drag>

<!-- 谨慎拖拽：2秒 -->
<zero-drag 
  v-model="list"
  :long-press-duration="2000">
</zero-drag>

建议：

• 列表简单且需要频繁拖拽：0.5-0.8秒
• 常规使用场景：1秒（默认）
• 防止误操作场景：1.5-2秒

6. 即时拖拽模式（编辑模式）

某些场景下需要点击按钮进入编辑模式后立即启用拖拽，无需长按：

<template>
  <view>
    <button @click="isEditing = !isEditing">
      {{ isEditing ? '完成' : '编辑' }}
    </button>

    <!-- 编辑模式下 disabled=false，无需长按即可拖拽 -->
    <zero-drag 
      v-model="list"
      :disabled="!isEditing"
      :shake="isEditing">
    </zero-drag>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isEditing: false,
      list: [/* 数据 */]
    }
  }
}
</script>

说明：

• disabled=true（默认）：需要长按才能拖拽
• disabled=false：立即启用拖拽，无需长按

📝 注意事项

1. 依赖组件：需要安装 uni-icons 组件
2. 数组元素：确保数组元素具有唯一性，避免重复导致渲染问题
3. 长按拖拽：默认需要长按 1 秒后才能拖拽，短按或滚动不会触发拖拽
4. 即时拖拽：设置 disabled=false 可跳过长按机制，实现即时拖拽（如编辑模式）
5. 性能优化：大数据量时建议分页或虚拟列表
6. 手柄模式：单列模式启用手柄时，只能通过手柄拖拽，内容区域可正常点击
7. 滚动与拖拽：长按期间不影响正常滚动，只有达到设定时长后才启用拖拽功能

插件预览:

预览的小程序不一定能及时更新当前插件