uni-app使用movable-area 实现数据的拖拽排序功能

文档地址

template部分
html 复制代码
<movable-area :style="getAreaStyle">
	<movable-view class="table-row" 
        v-for="v,i in move.list"
        :key="v.id"
        :y="v.y"
        @change="handle_moving"
		direction="vertical"
        @touchstart="handle_dragstart(i,v)" 
        @touchend="handle_dragend(i,v)"
		@longpress="handleLongpress(v)" 
        :disabled="move.disabled">
				<view class="table-cell">{{i+1}}</view>
				<view class="table-cell">选择物料</view>
	 </movable-view>
</movable-area>
css 复制代码
.table-cell,.table-row{
   height:50rpx;
}
.table-row{
  width:100%;
  display: flex;
}
.table-cell{
  width:200rpx;
}

注意使用movable-area时需要设置高度和宽度 否则默认10

js部分
javascript 复制代码
const move = reactive({
        list:[],
		disabled: true,
		activeIndex: -1,
		moveToIndex: -1,
		oldIndex: -1,
		tempDragInfo: {
			y: ''
		},
		cloneList: [],
		longpress: true,

	})

	// 获取位置
	const getPosition_y = (index) => {
		return index * 25
	}
	const getAreaStyle = computed(() => {
		return {
			width: '100%',
			height: move.list.length * 25 + 'px'
		}
	})

	// 初始化列表
	const initList = (list = []) => {
		const newList = JSON.parse(JSON.stringify(list));
		move.list = newList.map((item, index) => {
			return {
				...item,
				y: getPosition_y(index)
			}
		})
		move.cloneList = JSON.parse(JSON.stringify(move.list));
	}

	// 开始拖拽
	const handle_dragstart = (i,v) => {
		if(!v.id){
			return false;
		}
		move.activeIndex = i;
		move.oldIndex = i;
	}

	// 拖拽结束
	const handle_dragend = (i,v) => {
		if(!v.id){
			return false;
		}
		if (move.disabled) return;
		if (move.moveToIndex != -1 && move.activeIndex != -1 && move.activeIndex != move.moveToIndex) {
			move.cloneList.splice(move.moveToIndex, 0, ...move.cloneList.splice(move.activeIndex, 1));
		} else {
			move.list[move.activeIndex]['y'] = move.tempDragInfo.y;
		}
		initList(move.cloneList)
		move.activeIndex = -1;
		move.oldIndex = -1;
		move.moveToIndex = -1;
		move.disabled = true;
	}

	// 移动
	const handle_moving = (e) => {
		console.log({e})
		if (e.detail.source !== 'touch') return;
		let y = e.detail.y;
		move.tempDragInfo.y = y;
		const currentY = Math.floor((y + 12.5) / 25)
		move.moveToIndex = Math.min(currentY, move.list.length - 1);
		if (move.oldIndex != move.moveToIndex && move.oldIndex != -1 && move.moveToIndex != -1) {
			const newList = JSON.parse(JSON.stringify(move.cloneList));
			let splicItem = newList.splice(move.activeIndex, 1)[0]
			newList.splice(move.moveToIndex, 0, splicItem);
			move.list.forEach((item, index) => {
				if (index != move.activeIndex) {
					const itemIndex = newList.findIndex(val => val?.id === item?.id);
					item['y'] = getPosition_y(itemIndex);
				}
			});
			move.oldIndex = move.moveToIndex;
		}
	}


	const handleLongpress = (v) => {
		if(!v.id){
			return false
		}
		move.disabled = false;
	}
相关推荐
学会煎墙11 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝12 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
晨枫阳12 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
iOS阿玮13 小时前
苹果 Swift 安卓SDK上线,用一套 Swift 代码开发安卓 App 成为可能!
uni-app·app·apple
2501_9159214313 小时前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
liusheng13 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
游戏开发爱好者814 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_9151063214 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
游戏开发爱好者817 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe060117 小时前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts