t-drag

Drag 拖拽

组件介绍

t-drag 用于实现列表项的拖拽排序功能，支持触摸拖动、位置交换、动画过渡效果。适用于需要用户自定义排序的场景，如菜单排序、图片排序等。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/drag/drag.uvue，通过 list 属性传入数据列表，监听 sortChange 事件获取排序后的数据。

<template>
  <view class="drag-demo">
    <t-drag :list="list" @sortChange="onSortChange" itemClass="drag-item">
      <template #default="{ item, index }">
        <view class="item-content">
          <t-icon name="drag" class="drag-icon"></t-icon>
          <text>{{ item.name }}</text>
        </view>
      </template>
    </t-drag>
  </view>
</template>

<script setup>
const list = ref([
  { id: 1, name: '项目 1' },
  { id: 2, name: '项目 2' },
  { id: 3, name: '项目 3' },
  { id: 4, name: '项目 4' },
  { id: 5, name: '项目 5' }
]);

function onSortChange(newList) {
  console.log('排序后的列表:', newList);
  list.value = newList;
}
</script>

<style scoped>
.drag-demo {
  padding: 20rpx;
}
.drag-item {
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}
.item-content {
  display: flex;
  align-items: center;
}
.drag-icon {
  margin-right: 20rpx;
  color: #999;
}
</style>

Props

属性名	说明	类型	默认值
list	数据列表	UTSJSONObject[]	[]
itemClass	列表项样式类	string	''

Events

事件名	说明	回调参数
sortChange	排序变化时触发	UTSJSONObject[]（排序后的列表）

Slots

插槽名	说明	作用域参数
default	列表项内容	{ item: 当前项数据, index: 当前索引 }

外部类

类名	说明
item-class	列表项样式类