Drag 拖拽排序

<!-- 1. 列表上下拖拽 -->
  <re-drag :list="listDragItems" :columns="1" itemKey="id" :gap="10" :itemHeight="76" sortMode="shift" @change="onListChange" @drag-start="onListDragStart" @drag-end="onListDragEnd" > <template #default="{ item, index }"> <view class="demo-list-item"> <view class="demo-list-item__left"> <text class="demo-list-item__index">{{ index + 1 }}</text> <view class="demo-list-item__content"> <text class="demo-list-item__title">{{ item['title'] }}</text> <text class="demo-list-item__desc">{{ item['desc'] }}</text> </view> </view> <text class="demo-list-item__handle">⋮⋮</text> </view> </template> </re-drag>

<!-- 2. 卡片选项拖拽 -->
  <re-drag :list="cardDragItems" :columns="2" itemKey="id" :gap="12" :itemHeight="104" sortMode="shift" @change="onCardChange" > <template #default="{ item, index }"> <view class="demo-card-item" :style="'background-color:' + item['bgColor'] + ';'"> <text class="demo-card-item__icon">{{ item['icon'] }}</text> <text class="demo-card-item__title">{{ item['name'] }}</text> <text class="demo-card-item__tag">{{ item['tag'] }}</text> <text class="demo-card-item__index">#{{ index + 1 }}</text> </view> </template> </re-drag>

<!-- 3. 九宫格拖拽（位置互换） -->
  <re-drag :list="gridSwapItems" :columns="3" itemKey="id" :gap="10" :itemHeight="92" sortMode="swap" @change="onGridChange" > <template #default="{ item }"> <view class="demo-grid-item"> <text class="demo-grid-item__icon">{{ item['icon'] }}</text> <text class="demo-grid-item__title">{{ item['name'] }}</text> </view> </template> </re-drag>

<!-- 操作 -->
  <re-button theme="primary" @click="resetAll">重置全部示例</re-button>