element plus:tree拖动节点交换位置和改变层级

图层list里有各种组件,用element plus的tree来渲染,可以把图片等组件到面板里,面板是容器,非容器组件,比如图片、文本等,就不能让其他组件拖进来。

主要在于allow-drop属性的回调函数编写,要理清楚思路,什么时候allow-drop返回true,什么时候返回false。

allow-drop回调函数参数里的type,有三个值:before、after、inner,这是解决问题的关键点。

比如把A节点向B节点拖动,before表示把A拖到B的前面,after表示把A拖到B的后面,inner表示把A拖到B里面去。

对于面板容器来说,这三种位置都是允许drop的,allow-drop的返回值一定是true;

对于其他组件来说,只有before和after是允许的,所以当type不等于inner的时候,allow-drop的返回值才是true,否则是false。

html代码:

关键点:draggable为true,设置allow-drop方法

html 复制代码
<el-tree ref="treeRef" style="width: 200px; margin-top: 10px" :data="designerStore.cacheComponents"
						draggable node-key="id" highlight-current v-if="flag"
						:current-node-key="designerStore.currentCpt ? designerStore.currentCpt.id : null"
						:allow-drop="allowDrop" :props="{ label: 'cptTitle', id: 'id', children: 'children' }"
						empty-text="无图层">
						<template #default="{ node, data }">
							<span class="custom-tree-node" @dblclick.stop="editCateName(data, node)"
								@mousedown="showConfigBar(data)" @contextmenu.prevent="showContextMenu">
								<img class="selectedItem-icon"
									:src="require('@/assets/icon/components/' + getIcon(data) + '.svg')" />
								<el-input v-model="data.cptTitle" v-if="isEdit === data.id" :ref="data.id"
									placeholder="请输入" @blur="editSave()" @keyup.enter="editSave()" size="small" />
								<span v-else>{{ data.cptTitle }}</span>
							</span>
						</template>
					</el-tree>

allow-drop方法:

javascript 复制代码
allowDrop(draggingNode, dropNode, type) {
				if (dropNode.data.cptKey === 'cpt-panel') {
					return true
				} else {
					return type !== 'inner'
				}
			}

最终效果:

相关推荐
前端小巷子24 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出3 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架