uniapp app实现多个容器中菜单拖动交换和排序

uniapp app菜单移动示例视频

第一步：先安装SortableJS，npm install sortablejs --save；

第二步：参考以下代码可实现：

<template>
    // 代写代码  vx781284440
	<view class="work-container">
		<view class="work-title">王者荣耀</view>
		<view class="work-menu" v-for="(item,index) of menuList" :key="index">
			<view class="menu-title">
				{{item.level}}
			</view>
			<view class="menu-grid-body">
				<uni-grid :className="'grid'+index" :column="4" :showBorder="false" @change="(e)=>{changeGrid(e,index)}"
					:highlight="false">
					<uni-grid-item :index="i" v-for="(el,i) of item.children" :key="i" :data-id="el">
						<view class="menu-grid-item-box">
							<image class="icon" :src="el.icon" mode="aspectFit"></image>
							<text class="text">{{el.title}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				menuList: [{
						level: '常用英雄',
						children: [{
								title: '妲己',
								icon: '../../static/images/work/yinhuang.png',
								url: '/pages/trouble/index'
							},
							{
								title: '李白',
								icon: '../../static/images/work/anquanjiandu.png',
								url: '/pages/secureSupervise/index'
							},
							{
								title: '王昭君',
								icon: '../../static/images/work/accident.png',
								url: '/pages/accident/index'
							},
							{
								title: '西施',
								icon: '../../static/images/work/xiaofang.png',
								url: '/pages/fireFighting/index'
							}
						]
					},
					{
						level: '上分英雄',
						children: [{
								title: '赵云',
								icon: '../../static/images/work/dykeDam.png',
							},
							{
								title: '程咬金',
								icon: '../../static/images/work/food.png',
							},
							{
								title: '韩信',
								icon: '../../static/images/work/traffic.png',
							},
							{
								title: '耀',
								icon: '../../static/images/work/meeting.png',
							}
						]
					}
				]
			}
		}
	}
</script>
// 若有不懂得地方加QQ781284440咨询
<script module="Sortable" lang="renderjs">
	import Sortable from 'sortablejs';

	export default {
		mounted() {
			let el1 = document.getElementsByClassName('grid0');
			let el2 = document.getElementsByClassName('grid1');
			let id1 = document.getElementById(el1[0].id);
			let id2 = document.getElementById(el2[0].id);
			new Sortable(id1, {
				group: 'shared',
				delay: 300,
				animation: 150,
				delayOnTouchOnly: true,
				touchStartThreshold: 10,
				onAdd: function(e) {
					console.log(e);
				},
				onRemove: function(e) {
					console.log(e);
				},
			});
			new Sortable(id2, {
				group: 'shared',
				delay: 300,
				animation: 150,
				delayOnTouchOnly: true,
				touchStartThreshold: 10,
				onAdd: function(e) {
					console.log(e);
				},
				onRemove: function(e) {
					console.log(e);
				},
			});
		}
	}
</script>