Drag 拖拽排序

• Drag 升级版已支持动态增删拖拽选项

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

t-drag 示例

<template>
	<t-page title="拖拽排序" :bounces="false" class="ff-fbsb">
		<t-card class="mltr.30" title="Drag 拖拽排序" sub-title="自研拖拽算法,丝滑不卡顿"></t-card>
		<t-section class="tdr-tdb-m.30" title="flex宫格布局"></t-section>
		<t-drag class="fl-plr.30-ffww-ff-facs-fbsb-fjcb">
			<t-drag-item v-for="i in 16" :key='i' :class="sty">
				<t-text>{{i-1}}</t-text>
			</t-drag-item>
		</t-drag>
		<t-button path='/pages/component/layout/drag/drag-list' type='p' class='mlr.30-mtb.50'>拖拽-列表</t-button>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sty: 'tdr-tdb-w.150-h.150-fc-mb.20'
			}
		},
		methods: {

		}
	}
</script>

示例列表

<template>
	<t-page title="拖拽排序" :bounces="false" class="ff-fbsb">
		<t-card class="mltr.30" title="Drag 拖拽排序" sub-title="自研拖拽算法,丝滑不卡顿"></t-card>
		<t-section class="tdr-tdb-m.30" title="list列表"></t-section>
		<t-drag class="fl-plr.30-ffww-ff-facs-fbsb-fjcb">
			<t-drag-item v-for="i in 6" :key='i' :class="sty">
				<t-text>{{i-1}}</t-text>
			</t-drag-item>
		</t-drag>
		<t-button path='/pages/component/layout/drag/drag' type='p' class='mlr.30-mtb.50'>拖拽-宫格</t-button>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sty: 'tdr-tdb-w.100%-h.150-fc-mb.20'
			}
		},
		methods: {

		}
	}
</script>

支持动态增删子选项示例

<template>
	<t-page title="拖拽排序" :bounces="false" class="ff-fbsb">
		<t-card class="mltr.30" title="Drag 拖拽排序" sub-title="自研拖拽算法,丝滑不卡顿"></t-card>
		<t-section class="tdr-tdb-m.30" title="flex宫格布局"></t-section>
		<!-- <t-popup direction="bottom" ref='popupbottom' :show-footer="true" :closeable="true"> -->
		<t-drag-plus class="fl  bg.#ccc ffww" v-model="count" v-if="switchss">
			<template v-slot:default="{item,index}">
				<t-col class='tdr tdb tdp mrb.30 faic twh.150'>
					<text>{{(item as counttype).name}}</text>
					<t-button size="mini" @click="del(index as number)" :stop="true">删除</t-button>
				</t-col>
			</template>
		</t-drag-plus>
		<!-- </t-popup> -->
		<t-button @click="add">添加</t-button>
		<t-button @click="del(0)">删除</t-button>
		<t-button @click="updatedsss">显示</t-button>
		<t-button path='/pages/component/layout/drag/drag-list' type='p' class='mlr.30-mtb.50'>拖拽-列表</t-button>
	</t-page>
</template>

<script>
	import { TuiGuid } from '@/uni_modules/tui-plus';
	type counttype = {
		id : string
		name : string
	}
	export default {
		data() {
			return {
				switchss: true,
				sty: 'tdr-tdb-w.100%-h.150-fc-mrb.20',
				count: [{
					id: TuiGuid(20),
					name: '1'
				}, {
					id: TuiGuid(20),
					name: '2'
				}, {
					id: TuiGuid(20),
					name: '3'
				}, {
					id: TuiGuid(20),
					name: '4'
				}, {
					id: TuiGuid(20),
					name: '5'
				}, {
					id: TuiGuid(20),
					name: '6'
				}, {
					id: TuiGuid(20),
					name: '7'
				}, {
					id: TuiGuid(20),
					name: '8'
				}, {
					id: TuiGuid(20),
					name: '9'
				}, {
					id: TuiGuid(20),
					name: '10'
				}] as counttype[]
			}
		},
		methods: {
			updatedsss() {
				this.switchss = false
				this.$nextTick(() => {
					this.switchss = true
				})
			},
			show() {
				(this.$refs['popupbottom'] as ComponentPublicInstance).$callMethod('show')
			},
			add() {
				this.count.push({
					id: TuiGuid(20),
					name: TuiGuid(10)
				})
			},
			del(i : number) {
				this.count.splice(i, 1)
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
-	-	-	-	-

Events

事件名	描述	回调参数	版本
-	-	-	-

Slots

名称	描述
default	默认插槽，用于放置t-drag-item