Draggable 拖拽排序 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# Draggable 拖拽排序新

此组件用于实现拖拽排序功能，支持多列网格布局、长按拖拽、手柄拖拽等多种交互方式。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

# 基本使用

通过 list 属性传入要排序的数据数组，监听 change 事件获取排序后的结果。

<template>
	<view>
		<u-draggable :list="list" @change="onChange">
			<template #item="{ item, index, active }">
				<view class="drag-item" :class="{ active }">
					<text>{{ item.name }}</text>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ name: '项目1', id: 1 },
					{ name: '项目2', id: 2 },
					{ name: '项目3', id: 3 },
					{ name: '项目4', id: 4 }
				]
			}
		},
		methods: {
			onChange(newList) {
				this.list = newList
				console.log('排序后的列表：', newList)
			}
		}
	}
</script>

<style>
.drag-item {
	padding: 20rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	margin: 10rpx;
}
.drag-item.active {
	background: #e3f2fd;
	transform: scale(1.05);
}
</style>
✅ Copy success!

# 多列网格布局

通过 column 属性设置列数，实现网格布局的拖拽排序。

<template>
	<view>
		<u-draggable :list="list" :column="3" @change="onChange">
			<template #item="{ item, index, active }">
				<view class="grid-item" :class="{ active }">
					<image :src="item.image" class="item-image"></image>
					<text class="item-name">{{ item.name }}</text>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ name: '应用1', image: '/static/app1.png', id: 1 },
					{ name: '应用2', image: '/static/app2.png', id: 2 },
					{ name: '应用3', image: '/static/app3.png', id: 3 },
					{ name: '应用4', image: '/static/app4.png', id: 4 },
					{ name: '应用5', image: '/static/app5.png', id: 5 },
					{ name: '应用6', image: '/static/app6.png', id: 6 }
				]
			}
		},
		methods: {
			onChange(newList) {
				this.list = newList
			}
		}
	}
</script>

<style>
.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
}
.item-image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
}
.item-name {
	font-size: 24rpx;
	margin-top: 8rpx;
}
</style>
✅ Copy success!

# 长按拖拽

启用 longpress 属性，需要长按元素才能开始拖拽。

<template>
	<view>
		<u-draggable :list="list" :longpress="true" @change="onChange">
			<template #item="{ item, index, active }">
				<view class="long-press-item" :class="{ active }">
					<text>{{ item.name }}</text>
					<text class="tip">长按拖拽</text>
				</view>
			</template>
		</u-draggable>
	</view>
</template>
✅ Copy success!

# 手柄拖拽

启用 handle 属性，只有点击手柄区域才能拖拽。需要在手柄元素上添加 data-handle="true" 属性。

<template>
	<view>
		<u-draggable :list="list" :handle="true" @change="onChange">
			<template #item="{ item, index, active }">
				<view class="handle-item" :class="{ active }">
					<view class="content">
						<text>{{ item.name }}</text>
					</view>
					<view class="handle" data-handle="true">
						⋮⋮
					</view>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<style>
.handle-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #fff;
	border-radius: 8rpx;
	margin: 10rpx;
}
.content {
	flex: 1;
}
.handle {
	padding: 10rpx;
	color: #999;
}
</style>
✅ Copy success!

# 禁用项目

在数据项中设置 disabled: true 可以禁用该项的拖拽功能。

<template>
	<view>
		<u-draggable :list="list" @change="onChange">
			<template #item="{ item, index, active, disabled }">
				<view class="drag-item" :class="{ active, disabled }">
					<text>{{ item.name }}</text>
					<text v-if="disabled" class="disabled-tip">禁用</text>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ name: '可拖拽项目1', id: 1 },
					{ name: '禁用项目', id: 2, disabled: true },
					{ name: '可拖拽项目2', id: 3 },
					{ name: '可拖拽项目3', id: 4 }
				]
			}
		}
	}
</script>
✅ Copy success!

# 可关闭项目

启用 closeable 属性，项目右上角会显示关闭按钮。

<template>
	<view>
		<u-draggable :list="list" :closeable="true" @change="onChange" @close="onClose">
			<template #item="{ item, index, active }">
				<view class="closeable-item" :class="{ active }">
					<text>{{ item.name }}</text>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<script>
	export default {
		methods: {
			onClose(index) {
				console.log('关闭项目：', index)
			}
		}
	}
</script>
✅ Copy success!

# 自定义关闭按钮

可以通过 close 插槽自定义关闭按钮样式。

<template>
	<view>
		<u-draggable :list="list" :closeable="true" @close="onClose">
			<template #item="{ item, index, active }">
				<view class="custom-item" :class="{ active }">
					<text>{{ item.name }}</text>
				</view>
			</template>
			<template #close>
				<view class="custom-close">
					<u-icon name="close" size="16" color="#ff4757"></u-icon>
				</view>
			</template>
		</u-draggable>
	</view>
</template>

<style>
.custom-close {
	width: 30rpx;
	height: 30rpx;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
}
</style>
✅ Copy success!

# 此页面源代码地址

页面源码地址

gitee

# API

# Props

参数	说明	类型	默认值	可选值
list	数据列表	Array	[]	-
column	列数	Number	2	-
aspectRatio	宽高比（填写此项时itemHeight失效）	Number	null	-
itemHeight	项目高度	String \| Number	60	-
damping	阻尼系数	Number	50	-
friction	摩擦系数	Number	2	-
handle	是否使用手柄拖拽	Boolean	false	true
disabled	是否禁用	Boolean	false	true
longpress	是否长按拖拽	Boolean	false	true
closeable	是否显示关闭按钮	Boolean	false	true

# Events

事件名	说明	回调参数	版本
change	拖拽排序完成时触发	Array: 排序后的数据数组	-
close	点击关闭按钮时触发	Number: 被关闭项目的索引	-

# Slot

名称	说明	参数
item	自定义项目内容	{ item: 数据项, index: 索引, startIndex: 初始索引, active: 是否激活, disabled: 是否禁用 }
close	自定义关闭按钮	-

← Signature 签名组件 Ellipsis 文本省略 →