div拖动到el-tree

### 实现将 `div` 元素拖拽到 Element-UI 的 `el-tree` 组件 为了实现这一功能，可以利用 HTML5 的原生拖放 API 和 Vue.js 中的事件处理机制来完成。具体来说，在源 `div` 上设置可拖动属性，并定义相应的拖放事件处理器；在目标 `el-tree` 组件上配置接受拖放操作的相关方法。 #### 设置源 `div` 可被拖动 首先需要让想要移动的那个 `div` 成为可拖动物件： ```html <div id="draggableDiv" draggable="true" @dragstart="handleDragStart" style="width: 100px;height: 100px;background-color:red;"> </div> ``` 这里设置了 `draggable=true` 属性使得该元素能够响应用户的拖曳动作，并绑定了 `@dragstart` 事件用于初始化数据传输对象 DataTransfer[^1]。 #### 配置 `el-tree` 接收拖放行为 对于接收方即 `el-tree` 而言，则需监听几个重要的拖放阶段事件——进入(`dragenter`)、离开(`dragleave`)以及放置(`drop`)时刻的动作并作出相应反馈: ```html <template> <el-tree :data="treeData" @node-click="handleNodeClick" @dragover.prevent @dragenter="handleDragEnter" @dragleave="handleDragLeave" @drop="handleDrop"> </el-tree> </template> <script> export default { methods: { handleDragEnter(event){ event.preventDefault(); // 更改样式表示允许放下 this.$refs.treeContainer.style.border = 'dashed'; }, handleDragLeave(){ // 恢复默认样式 this.$refs.treeContainer.style.border = ''; }, handleDrop(event){ const data = JSON.parse(event.dataTransfer.getData('text/plain')); // 执行实际逻辑比如更新树结构或存储位置信息等 console.log(data); // 结束后恢复外观状态 this.handleDragLeave(); } } } </script> ``` 上述代码片段展示了如何通过阻止浏览器默认行为（如打开链接）、改变容器边框样式提示用户当前位置有效等方式增强用户体验的同时也完成了基本的数据交换过程。 #### 定义拖动开始时的行为 当某个项目开始被拖动的时候，应该把该项目的信息保存起来以便后续使用： ```javascript methods:{ ... handleDragStart(event){ let draggedItem = {id:'uniqueId', name:'itemName'}; event.dataTransfer.setData('text/plain',JSON.stringify(draggedItem)); } ... } ``` 这段 JavaScript 函数负责准备要传递给目标区域的内容，通常会包含一些描述性的字段帮助识别具体的项是什么。 通过以上步骤就可以成功地实现了从普通的 `div` 到特定版本下的 Element UI Tree 控件之间的交互式转移效果了。