拖拽文件管理

h5对于可拖拽的元素，提供了下面三个事件用于拖拽监听

dragstart： 拖拽开始
drag： 拖拽中
dragend： 拖拽结束

拖拽范围事件

dragenter： 拖拽元素进入该dom时触发
dragover： 拖拽元素在该dom范围内触发
dragleave： 拖拽元素离开该dom时触发

<el-tree
              :props="props"
              @node-click="handleNodeClick"
              :load="loadNode"
              lazy
            >
              <template v-slot="{ node, data }">
                <span
                  class="custom-tree-node"
                  :title="node.label"
                  :style="{ 'max-width': maxWidth[node.level] }"
                  @drop.prevent="drop($event, node)"
                  @dragover.prevent="dragover"
                  @dragenter="dragenter"
                  @dragleave="dragleave"
                >
                  <span :class="$scopedSlots.button ? 'tree-node-text' : ''">
                    <span
                      style="color: #f4c331"
                      class="iconfont iconwenjianshu"
                    ></span>
                    <span class="tree-text">{{ node.label }}</span>
                  </span>
                  <slot name="button" :node="node" :data="data"></slot>
                </span>
              </template>
            </el-tree>
         .....
         .....
         .....
            <el-card
              shadow="hover"
              class="card_box"
              v-for="(itme, index) in datalist"
              :key="index"
              :class="index == selectindex ? themeColor === '1'?'clickheightred': 'clickheightBlur': ''"
              @dragstart="dragstart($event, itme)"
              @dragend="dragend"
              draggable="true"

            >
              <div class="card_box_nr" @click="clickCard(index)">
                <span style="color: #f4c331" class="wenjian iconwenjian"></span>
                <span class="card_box_nr_title" :title="itme.name">{{
                  itme.name
                }}</span>
                <span class="card_box_nr_nr">2024-7-3 2:00 1.00kb</span>
              </div>
            </el-card>

DragEvent

当触发拖拽事件时候，会得到一个Event对象，这个Event对象其中包含这一些常用的属性

target： 为拖拽中的元素的指向
clientX： 当前鼠标的x点坐标
clientY： 当前鼠标的y点坐标
dataTransfer： 当一次拖拽开始发生的时候，会产生一个DataTransfer对象，这个DataTransfer对象于整个拖拽过程触发的事件共享。当这一次的拖拽行为结束之后，这个对象会被销毁

DataTransfer

这个对象用于保存在 DragEvent 下的 dataTransfer中，可以用来存放拖拽过程中产生的一些数据
存放数据有三个api
setData： 设置data
getData： 获取之前设置的data
clearData： 清除所有data

//进入元素触发
    dragenter(event) {
      console.log("进入");
      // 添加高亮样式
      event.target.parentNode.classList.add(this.themeColor === '1'?"highlightred":'highlightBlur');
    },
    //离开元素触发
    dragleave(event) {
      console.log("离开");
      // 删除高亮样式
      event.target.parentNode.classList.remove(this.themeColor === '1'?"highlightred":'highlightBlur');
    },
    // 进行放置
    drop(event, node) {
      // 删除高亮样式
      event.target.parentNode.classList.remove(this.themeColor === '1'?"highlightred":'highlightBlur');
      console.log("进行放置", node, event.dataTransfer.getData("a"));
    },
    // 放置位置 - 阻止默认事件
    dragover(event) {
      event.preventDefault();
    },
    // 拖动开始
    dragstart(event, itme) {
      // event.target.parentNode.classList.remove("highlight");
      console.log("拖动开始", event, itme);
      event.dataTransfer.setData("a", itme);
    },
    //拖动结束
    dragend(event) {
      //清楚储存在dataTransfer的数据
      event.dataTransfer.clearData();
      console.log("拖动结束", event);
    },