Drag

组件类型：UxDragComponentPublicInstance

支持列表式、宫格式拖动排序，支持设置列数，列表式支持边界滚动，支持动态新增删除项目

平台兼容性

UniApp X

Android	iOS	web	鸿蒙 Next	小程序
√	√	√	x	√

UniApp Vue Nvue

Android	iOS	web	鸿蒙 Next	小程序
x	x	√	x	x

Props

属性名	类型	默认值	说明
name	String	id	唯一索引名称
list	Array		数据列表
col	Number	1	列数
height	Any	45	单项高度
border	Boolean	false	显示下边框
longtouch	Boolean	true	是否开启长按拖动
touchtime	Number	250	长按拖动触发时间开启长按拖动才有效
speed	Number	1	列表边界滚动速度
disabled	Boolean	false	是否禁用

Events

事件名	说明	参数
click	点击项目时触发
change	拖拽完成时触发
start	拖拽开始时触发
end	拖拽结束时触发

示例代码

htmlscriptstyle

html

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll :show-scrollbar="false" :disabled="disabled">
			<ux-card direction="column" icon="flag-filled" title="拖拽排序" :bold="true">
				<ux-text text="支持列表式、宫格式拖动排序，支持设置列数，列表式支持边界滚动，支持动态新增删除项目"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="列表式" :bold="true">
				<template #subtitle>
					<ux-row>
						<ux-button theme="primary" :ml="10" text="+1" @click="add()"></ux-button>
						<ux-button theme="primary" :ml="10" text="-1" @click="del()"></ux-button>
						<ux-button theme="primary" :ml="10" text="重置" @click="reset()"></ux-button>
					</ux-row>
				</template>
				<ux-row align="center" :mb="15">
					<ux-text text="支持列表式拖动排序，支持边界自动滚动"></ux-text>
				</ux-row>
				
				<view style="max-height: 250px;">
					<ux-drag ref="uxDragRef" :list="list" :col="1" :border="true" @start="disabled = true" @end="disabled = false" @click="click" @change="change">
						<!-- #ifdef MP -->
						<template v-for="(item, index) in list" :key="index">
							<template v-slot:[`${item['id']}`]>
								<view class="row">
									<view class="content">
										<image class="icon" :src="item['url']"></image>
										<text class="text">{{item['id']}}</text>
									</view>
									<view class="drag">
										<ux-icon type="drag"></ux-icon>
									</view>
								</view>
							</template>
						</template>
						<template v-slot:drag="{data}">
							<view class="row">
								<view class="content">
									<image class="icon" :src="data['url']"></image>
									<text class="text">{{data['id']}}</text>
								</view>
								<view class="drag">
									<ux-icon type="drag"></ux-icon>
								</view>
							</view>
						</template>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<template v-slot="{data}">
							<view class="row">
								<view class="content">
									<image class="icon" :src="data['url']"></image>
									<text class="text">{{data['id']}}</text>
								</view>
								<view class="drag">
									<ux-icon type="drag"></ux-icon>
								</view>
							</view>
						</template>
						<!-- #endif -->
					</ux-drag>
				</view>
			</ux-card>
			
			<!-- #ifdef APP-ANDROID -->
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="系统问题 待修复"></ux-text>
				</ux-row>
			</ux-placeholder>
			<!-- #endif -->
			
			<!-- #ifndef APP-ANDROID -->
			<ux-card direction="column" icon="arrowright" title="宫格式" :bold="true">
				<template #subtitle>
					<ux-row>
						<ux-button theme="primary" :ml="10" text="+1" @click="add()"></ux-button>
						<ux-button theme="primary" :ml="10" text="-1" @click="del()"></ux-button>
						<ux-button theme="primary" :ml="10" text="重置" @click="reset()"></ux-button>
					</ux-row>
				</template>
				<ux-row align="center" :mb="15">
					<ux-text text="支持宫格式拖动排序，支持长按拖拽"></ux-text>
				</ux-row>
				<ux-drag ref="uxDragGridRef" name="cid" :list="list" :col="3" @start="disabled = true" @end="disabled = false" @click="click" @change="change">
					<!-- #ifdef MP -->
					<template v-for="(item, index) in list" :key="index">
						<template v-slot:[`${item['cid']}`]>
							<view class="grid">
								<ux-text :bold="true" :size="15" color="black" :text="item['cid']"></ux-text>
							</view>
						</template>
					</template>
					<template v-slot:drag="{data}">
						<view class="grid">
							<ux-text :bold="true" :size="15" color="black" :text="data['cid']"></ux-text>
						</view>
					</template>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<template v-slot="{data}">
						<view class="grid">
							<ux-text :bold="true" :size="15" color="black" :text="data['cid']"></ux-text>
						</view>
					</template>
					<!-- #endif -->
				</ux-drag>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
			<!-- #endif -->
			
		</ux-scroll>
	</ux-page>
</template>

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll :show-scrollbar="false" :disabled="disabled">
			<ux-card direction="column" icon="flag-filled" title="拖拽排序" :bold="true">
				<ux-text text="支持列表式、宫格式拖动排序，支持设置列数，列表式支持边界滚动，支持动态新增删除项目"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="列表式" :bold="true">
				<template #subtitle>
					<ux-row>
						<ux-button theme="primary" :ml="10" text="+1" @click="add()"></ux-button>
						<ux-button theme="primary" :ml="10" text="-1" @click="del()"></ux-button>
						<ux-button theme="primary" :ml="10" text="重置" @click="reset()"></ux-button>
					</ux-row>
				</template>
				<ux-row align="center" :mb="15">
					<ux-text text="支持列表式拖动排序，支持边界自动滚动"></ux-text>
				</ux-row>
				
				<view style="max-height: 250px;">
					<ux-drag ref="uxDragRef" :list="list" :col="1" :border="true" @start="disabled = true" @end="disabled = false" @click="click" @change="change">
						<!-- #ifdef MP -->
						<template v-for="(item, index) in list" :key="index">
							<template v-slot:[`${item['id']}`]>
								<view class="row">
									<view class="content">
										<image class="icon" :src="item['url']"></image>
										<text class="text">{{item['id']}}</text>
									</view>
									<view class="drag">
										<ux-icon type="drag"></ux-icon>
									</view>
								</view>
							</template>
						</template>
						<template v-slot:drag="{data}">
							<view class="row">
								<view class="content">
									<image class="icon" :src="data['url']"></image>
									<text class="text">{{data['id']}}</text>
								</view>
								<view class="drag">
									<ux-icon type="drag"></ux-icon>
								</view>
							</view>
						</template>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<template v-slot="{data}">
							<view class="row">
								<view class="content">
									<image class="icon" :src="data['url']"></image>
									<text class="text">{{data['id']}}</text>
								</view>
								<view class="drag">
									<ux-icon type="drag"></ux-icon>
								</view>
							</view>
						</template>
						<!-- #endif -->
					</ux-drag>
				</view>
			</ux-card>
			
			<!-- #ifdef APP-ANDROID -->
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="系统问题 待修复"></ux-text>
				</ux-row>
			</ux-placeholder>
			<!-- #endif -->
			
			<!-- #ifndef APP-ANDROID -->
			<ux-card direction="column" icon="arrowright" title="宫格式" :bold="true">
				<template #subtitle>
					<ux-row>
						<ux-button theme="primary" :ml="10" text="+1" @click="add()"></ux-button>
						<ux-button theme="primary" :ml="10" text="-1" @click="del()"></ux-button>
						<ux-button theme="primary" :ml="10" text="重置" @click="reset()"></ux-button>
					</ux-row>
				</template>
				<ux-row align="center" :mb="15">
					<ux-text text="支持宫格式拖动排序，支持长按拖拽"></ux-text>
				</ux-row>
				<ux-drag ref="uxDragGridRef" name="cid" :list="list" :col="3" @start="disabled = true" @end="disabled = false" @click="click" @change="change">
					<!-- #ifdef MP -->
					<template v-for="(item, index) in list" :key="index">
						<template v-slot:[`${item['cid']}`]>
							<view class="grid">
								<ux-text :bold="true" :size="15" color="black" :text="item['cid']"></ux-text>
							</view>
						</template>
					</template>
					<template v-slot:drag="{data}">
						<view class="grid">
							<ux-text :bold="true" :size="15" color="black" :text="data['cid']"></ux-text>
						</view>
					</template>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<template v-slot="{data}">
						<view class="grid">
							<ux-text :bold="true" :size="15" color="black" :text="data['cid']"></ux-text>
						</view>
					</template>
					<!-- #endif -->
				</ux-drag>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
			<!-- #endif -->
			
		</ux-scroll>
	</ux-page>
</template>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	
	let id = 0
	const disabled = ref(false)
	const list = ref<UTSJSONObject[]>([])
	const uxDragRef = ref(null)
	const uxDragGridRef = ref(null)
	
	function reset() {
		list.value = [
			{id: '0', cid: '0', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '1', cid: '1', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '2', cid: '2', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '3', cid: '3', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '4', cid: '4', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '5', cid: '5', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '6', cid: '6', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '7', cid: '7', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '8', cid: '8', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
		]
		
		// 模拟一个唯一id
		id = list.value.length
	}
	
	function add() {
		list.value.push({
			id: `${id}`,
			cid: `${id}`,
			url: 'https://via.placeholder.com/200x200.png/f0f0f0'
		})
		
		// 模拟一个唯一id
		id++
	}
	
	function del() {
		list.value.splice(0, 1)
		// list.value.splice(list.value.length - 1, 1)
	}
	
	function change(e : UTSJSONObject[]) {
		list.value = e
	}
	
	function click(item: UTSJSONObject) {
		uni.showToast({
			title: `点击了${item['id']}`,
			duration: 300,
			icon: 'none'
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		reset()
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/drag.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
</script>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	
	let id = 0
	const disabled = ref(false)
	const list = ref<UTSJSONObject[]>([])
	const uxDragRef = ref(null)
	const uxDragGridRef = ref(null)
	
	function reset() {
		list.value = [
			{id: '0', cid: '0', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '1', cid: '1', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '2', cid: '2', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '3', cid: '3', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '4', cid: '4', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '5', cid: '5', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '6', cid: '6', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '7', cid: '7', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
			{id: '8', cid: '8', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
		]
		
		// 模拟一个唯一id
		id = list.value.length
	}
	
	function add() {
		list.value.push({
			id: `${id}`,
			cid: `${id}`,
			url: 'https://via.placeholder.com/200x200.png/f0f0f0'
		})
		
		// 模拟一个唯一id
		id++
	}
	
	function del() {
		list.value.splice(0, 1)
		// list.value.splice(list.value.length - 1, 1)
	}
	
	function change(e : UTSJSONObject[]) {
		list.value = e
	}
	
	function click(item: UTSJSONObject) {
		uni.showToast({
			title: `点击了${item['id']}`,
			duration: 300,
			icon: 'none'
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		reset()
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/drag.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
</script>

css

<style lang="scss">
	
	.grid {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f0f0f0;
		border: 1px solid white;
		box-sizing: border-box;
	}
	
	.row {
		flex: 1;
		height: 44px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
		
		.content {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 5px;
			padding-right: 5px;
		
			.icon {
				width: 30px;
				height: 30px;
				border-radius: 4px;
			}
			
			.text {
				font-size: 14px;
				margin-left: 5px;
			}
		}
		
		.drag {
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		
			.drag-text {
				font-size: 14px;
				color: black;
			}
		}
	}
</style>

<style lang="scss">
	
	.grid {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f0f0f0;
		border: 1px solid white;
		box-sizing: border-box;
	}
	
	.row {
		flex: 1;
		height: 44px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
		
		.content {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 5px;
			padding-right: 5px;
		
			.icon {
				width: 30px;
				height: 30px;
				border-radius: 4px;
			}
			
			.text {
				font-size: 14px;
				margin-left: 5px;
			}
		}
		
		.drag {
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		
			.drag-text {
				font-size: 14px;
				color: black;
			}
		}
	}
</style>

Drag ​

平台兼容性 ​

UniApp X ​

UniApp Vue Nvue ​

Props ​

Events ​

示例代码 ​

Drag

平台兼容性

UniApp X

UniApp Vue Nvue

Props

Events

示例代码