更新记录

0.0.2（2025-08-28）

• feat: 更新依赖

0.0.1（2025-08-28）

• 首次发布
• 支持横向拖拽排序功能
• 支持多列布局
• 支持自定义项高度
• 支持禁用特定项的拖拽
• 提供完整的类型定义
• 提供详细的示例和文档

平台兼容性

云端兼容性

uni-app(4.76)

uni-app x(4.65)

lime-dnd 拖拽排序组件

一个功能强大的拖拽排序组件，支持单列和多列布局，可用于列表重排序、宫格排序等场景。组件提供了丰富的自定义选项，包括禁用特定项、使用拖拽手柄等功能，可满足各种复杂的交互需求。

文档链接

📚 组件详细文档请访问以下站点：

• 拖拽排序组件文档 - 站点1
• 拖拽排序组件文档 - 站点2
• 拖拽排序组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-dnd
2. 导入后可能需要重新编译项目
3. 在页面中使用l-dnd、l-dnd-item和l-dnd-handle组件
4. 需要源码才能运行，不支持试用。请谨慎购买。

代码演示

基础用法

最简单的拖拽排序组件用法，创建一个可拖拽的列表。

<l-dnd v-model:list="basicList" @change="onBasicChange">
  <l-dnd-item v-for="(item, index) in basicList" :key="item['id']" :index="index">
    <view class="item">
      <text class="text">{{ item['text'] }}</text>
    </view>
  </l-dnd-item>
</l-dnd>

// 基础列表数据
const basicList = ref([
  { id: 1, text: '项目 1' },
  { id: 2, text: '项目 2' },
  { id: 3, text: '项目 3' },
  { id: 4, text: '项目 4' },
  { id: 5, text: '项目 5' },
]);

// 事件处理函数
const onBasicChange = (newList: UTSJSONObject[]) => {
  console.log('列表更新:', newList);
};

多列布局

创建一个多列的网格布局，适用于宫格排序场景。

<l-dnd v-model:list="gridList" :itemHeight="120" :column="3" :gap="5">
  <l-dnd-item v-for="(item, index) in gridList" :key="item['id']" :index="index">
    <view class="grid-item">
      <image class="grid-item__image" :src="item['image']"></image>
      <text class="grid-item__text">{{ item['text'] }}</text>
    </view>
  </l-dnd-item>
</l-dnd>

// 网格列表数据
const gridList = ref([
  { id: 1, text: '图片 1', image: 'https://example.com/image1.jpg' },
  { id: 2, text: '图片 2', image: 'https://example.com/image2.jpg' },
  { id: 3, text: '图片 3', image: 'https://example.com/image3.jpg' },
  { id: 4, text: '图片 4', image: 'https://example.com/image4.jpg' },
  { id: 5, text: '图片 5', image: 'https://example.com/image5.jpg' },
  { id: 6, text: '图片 6', image: 'https://example.com/image6.jpg' },
]);

// 事件处理函数
const onGridChange = (newList: UTSJSONObject[]) => {
  console.log('网格列表更新:', newList);
};

禁用特定项

可以设置某些项不可拖拽，适用于需要固定位置的元素。

<l-dnd v-model:list="disabledList" :itemHeight="50" :column="3">
  <l-dnd-item v-for="(item, index) in disabledList" :key="item['id']" :index="index"
    :disabled="item['disabled']">
    <view class="item" :class="{ 'item--disabled': item['disabled'] == true }">
      <text class="text">{{ item['text'] }}</text>
    </view>
  </l-dnd-item>
</l-dnd>

// 包含禁用项的列表数据
const disabledList = ref([
  { id: 1, text: '禁用项 1', disabled: true },
  { id: 2, text: '禁用项 2', disabled: true },
  { id: 3, text: '可拖拽项 1', disabled: false },
  { id: 4, text: '可拖拽项 2', disabled: false },
  { id: 5, text: '可拖拽项 3', disabled: false },
  { id: 6, text: '禁用项 3', disabled: true },
]);

// 事件处理函数
const onDisabledChange = (newList: UTSJSONObject[]) => {
  console.log('禁用列表更新:', newList);
};

使用拖拽手柄

通过拖拽手柄控制拖拽行为，提供更精确的操作体验。

<l-dnd v-model:list="basicList" @change="onBasicChange" useHandle>
  <l-dnd-item v-for="(item, index) in basicList" :key="item.id" :index="index">
    <view class="item">
      <text class="text">{{ item['text'] }}</text>
      <l-dnd-handle>
        <l-icon name="view-list"></l-icon>
      </l-dnd-handle>
    </view>
  </l-dnd-item>
</l-dnd>

Vue2使用说明

本插件使用了composition-api，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-dnd/components/lime-dnd -->
<lime-dnd />

插件标签说明

API文档

Dnd Props 属性说明

Dnd Events 事件

DndItem Props 属性说明

DndItem Slots 插槽

DndHandle Props 属性说明

DndHandle Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助