# t-drag

Drag 拖拽

t-drag 组件介绍

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

t-drag 平台兼容

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

t-drag 基础用法

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

<template>
	<view>
		<t-card class="mltr-15"
				title="Drag 拖拽排序"
				sub-title="自研拖拽算法,丝滑不卡顿"></t-card>
		<t-drag class="fl fww tdr ptlr-15"
				item-class="twh-90"
				:list="list">
			<template v-slot:default="{item,index}">
				<view class="h-75 fc mr-15 r-10 bg-#fff"
					  @click.stop="()=>true">
					<text>{{(item as UTSJSONObject).getString('title')}}</text>
				</view>
			</template>
		</t-drag>
		<t-button class="mlrb-15"
				  type="primary"
				  @click="test1">修改数据</t-button>
		<t-button class="mlrb-15"
				  type="warning"
				  @click="add">增加数据</t-button>
	</view>
</template>

<script setup>
	import { TuiGuid, getRandomInt } from '@/uni_modules/tui-common';
	const list = ref<UTSJSONObject[]>([
		{ id: '1', title: '1' },
		{ id: '2', title: '2' },
		{ id: '3', title: '3' },
		{ id: '4', title: '4' },
		{ id: '5', title: '5' },
		{ id: '6', title: '6' },
		{ id: '7', title: '7' },
		{ id: '8', title: '8' },
		{ id: '9', title: '9' },
		{ id: '10', title: '10' },
		{ id: '11', title: '11' },
		{ id: '12', title: '12' },
		{ id: '13', title: '13' },
		{ id: '14', title: '14' },
		{ id: '15', title: '15' }
	])
	function test1() {
		list.value = [
			{ id: '1', title: '首页' },
			{ id: '2', title: '商品管理' },
			{ id: '3', title: '订单管理' },
		]
	}
	const list1 = ref<UTSJSONObject[]>([
		{ id: '1', title: '首页' },
		{ id: '2', title: '商品管理' },
		{ id: '3', title: '订单管理' },
	])
	const area = ref<number>(1)
	function test() {
		console.log('testtest')
	}
	function add() {
		list.value.push({ id: TuiGuid(getRandomInt(5, 15)), title: TuiGuid(getRandomInt(5, 15)) })
	}
	function del1(index : number) {
		list.value.splice(index, 1)
		console.log(list.value.length)
	}
	function del(index : any | null) {
		list.value.splice(parseInt(`${index}`), 1)
	}
</script>

t-drag Props

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

t-drag Events

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

t-drag Slots

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

外部类

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