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;
	}
相关推荐
软工的小白1 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
2501_916008893 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921433 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °4 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC6 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser7 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_916008897 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915921439 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网11 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang12 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app