图层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方法

<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方法：

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

最终效果：