更新记录

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

因为做拖拽排序没找到好用的插件，自己发布一个希望有相同需求的人可以用得到

平台兼容性

uni-app(4.01)

mm-drag-sort 列表拖拽排序

组件名：mm-drag-sort

使用方法

通过作用域插槽的形式自定义列表样式

通过v-model:list传入列表数据 idKey为唯一标识（如不填写默认为id）

使用示例

<template>
  <view class="health-page">
    <DraggableList v-model:list="myItems" :id-key="text">
      <template #default="{ item, index }">
        <view class="item-content">
          <text>Item {{ item.id }} - {{ item.text }}</text>
          <text>Order: {{ index + 1 }}</text>
        </view>
      </template>
    </DraggableList>
    <view class="current-order">
      <text>Current Order:</text>
      <text v-for="item in myItems" :key="item.id">{{ item.id }} </text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import DraggableList from './components/DraggableList.vue';

const myItems = ref([
  { id: 1, text: 'First item' },
  { id: 2, text: 'Second item' },
  { id: 3, text: 'Third item' },
  { id: 4, text: 'Fourth item' },
]);

watch(myItems, (newOrder) => {
  console.log('New order:', newOrder.map(item => item.id));
}, { deep: true });
</script>