# t-drag-item

DragItem 拖拽项

t-drag-item 组件介绍

t-drag-item 是 t-drag 的子组件，用于承载可拖动的单个列表项。通常不需要直接使用，通过 t-drag 的默认插槽即可实现拖拽功能。

t-drag-item 平台兼容

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

t-drag-item 基础用法

通常不需要直接使用 t-drag-item，推荐使用 t-drag 组件的默认插槽方式：

<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-item Props

该组件为内部实现组件，不对外暴露 Props。

t-drag-item Events

该组件为内部实现组件，不对外暴露 Events。

t-drag-item Slots

插槽名	说明
default	列表项内容