更新记录

1.0.3（2026-01-15） 下载此版本

页面过长时防止页面滚动

1.0.2（2025-12-05） 下载此版本

修改支持情况 经测试为了在小程序中完美体验 目前在H5中可能效果不佳

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

修改使用示例

平台兼容性

uni-app(4.0)

mm-drag-sort 列表拖拽排序

组件名：mm-drag-sort

使用方法

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

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

使用示例

<template>
  <view class="health-page">
    <mm-drag-sort 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>
    </mm-drag-sort>
    <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';

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>