Vue中el-tree结合vuedraggable实现跨组件元素拖拽

实现效果：

左侧el-tree:

<template><el-treeclass="filter-tree":data="treeData":props="defaultProps":filter-node-method="filterNode"node-key="id"draggable:allow-drop="allowDrop"@node-drag-start="handleDragStart"@node-drag-end="handleDragEndz"ref="tree"></el-tree>
</template>
<script>data() {return {treeData:[],defaultProps: {children: 'children',label: 'datasetColumnName'},}},methods: {filterNode(value, data) {if (!value) return true;return data.datasetColumnName.indexOf(value) !== -1;},// 阻止el-tree默认拖拽allowDrop() {return false;},handleDragStart() {console.log(node.data)if(!node.data.aqlStr) returnthis.draggingItem = node.datathis.isShowDragging = true},handleDragEndz() {this.isShowDragging = false},}
</script>

右侧vuedraggable接收，先npm install vuedraggable，main.js中引入：

import draggable from 'vuedraggable';

Vue.use(draggable)

使用如下：

<draggable v-model="dragList" class="drag_list" :class="{ 'hint': isShowDragging?true:false }" animation="1000"  group="items" @dragover="handleDragOver" @drop="handleTargetDrop($event)"><div class="add_tip" v-if="dragList.length <= 0"><i class="el-icon-plus"></i></div><template v-else v-for="(item, index) in dragList" :key="index">其他代码</template>
</draggable>
<script>export default {data() {return {}},methods: {handleDragOver(e) {e.preventDefault();},handleTargetDrop(e, index) {e.preventDefault();// 阻止冒泡e.stopPropagation();// 将el-tree选中的数据放入dragList中this.dragList.push(this.draggingItem)// 刷新页面this.$forceUpdate()}}}
</script>

文章参考：

https://blog.csdn.net/Turn_to_empty/article/details/126759544