更新记录

1.0.0（2025-04-07） 下载此版本

• 支持触摸拖拽排序
• 支持Vue 2和Vue 3
• 内置默认列表项渲染样式
• 支持完全自定义列表项内容
• 提供拖拽开始、结束和变化事件
• 拖拽过程中提供操作提示信息
• 支持长按才能拖拽的模式

平台兼容性

uni-app

uni-app x

XL Drag List - 拖拽列表组件

在线演示地址：https://xlandzxg-8gj5901i764f06f7-1308786497.tcloudbaseapp.com/index.html#/ 一个可拖拽排序的列表组件，支持自定义列表项内容，适用于各种需要拖拽排序的场景。

特性

• 支持触摸拖拽排序
• 支持Vue 2和Vue 3
• 内置默认列表项渲染样式
• 支持完全自定义列表项内容
• 提供拖拽开始、结束和变化事件
• 拖拽过程中提供操作提示信息
• 支持长按才能拖拽的模式

安装

将组件文件夹复制到你的uni-app项目的components目录中即可。

使用方法

基础用法

Vue 3 组合式API写法

<template>
  <!-- 使用默认渲染 -->
  <xl-drag-list v-model:list="myList"></xl-drag-list>
</template>

<script setup>
import { ref } from 'vue';
import XlDragList from '@/components/xl-drag-list/index.vue';

const myList = ref([
  { id: 1, title: '项目一', desc: '这是第一个项目' },
  { id: 2, title: '项目二', desc: '这是第二个项目' },
  { id: 3, title: '项目三', desc: '这是第三个项目' },
]);
</script>

Vue 2 选项式API写法

<template>
  <!-- 使用默认渲染 -->
  <xl-drag-list :list="myList" @update:list="updateList"></xl-drag-list>
</template>

<script>
import XlDragList from '@/components/xl-drag-list/index.vue';

export default {
  components: {
    XlDragList
  },
  data() {
    return {
      myList: [
        { id: 1, title: '项目一', desc: '这是第一个项目' },
        { id: 2, title: '项目二', desc: '这是第二个项目' },
        { id: 3, title: '项目三', desc: '这是第三个项目' },
      ]
    }
  },
  methods: {
    updateList(newList) {
      this.myList = newList;
    }
  }
}
</script>

自定义列表项

<template>
  <xl-drag-list v-model:list="myList" :item-height="70">
    <template v-slot="{ item, index }">
      <!-- 自定义列表项 -->
      <view class="custom-item">
        <text>{{ index + 1 }}. {{ item.title }}</text>
        <text class="drag-handle">≡</text>
      </view>
    </template>
  </xl-drag-list>
</template>

启用拖拽提示

<template>
  <xl-drag-list 
    v-model:list="myList" 
    :show-toast="true"
    drag-start-text="开始拖拽..."
    drag-end-text="拖拽完成！"
  ></xl-drag-list>
</template>

API

Props

事件

插槽

最近更新

• 添加了拖拽时的提示信息功能，可通过showToast控制
• 支持自定义拖拽开始和结束的提示文本
• 增加了长按拖拽模式，避免与点击事件冲突

许可证

MIT