drag事件

需求简单实现：

参考： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dragover_event

一、拖拽源

给元素添加属性 draggable="true" ，就会变成可以拖拽的源

    <div
        draggable="true"
        @drag="handleSourceDrag"
        @dragstart="handleDragStart"
        @dragend="handleDragEnd"
        >
        可拖拽源
    </div>

1、dragstart事件：源被认定开始拖拽的时候触发

    handleDragStart (e) {
      console.log('开始被拖拽')
      this.dragSource = e.target
      this.dragText = e.target.innerText
    },

2、drag事件：源在被拖拽的时候持续触发

    handleSourceDrag () {
      console.log('I am dragged')
    },

3、dragend 事件：源被认定结束拖拽的时候触发

    handleDragEnd () {
      console.log('拖拽结束')
    },

二、容器

    <el-input
        v-model="value1"
        @dragenter.native="handleDragEnter"
        @dragover.native="handleDragOver"
        @dragleave.native="handleDragLeave"
        @drop.native="handleDrop"
    ></el-input>

4、dragenter事件：容器监听到有源进入时触发

    handleDragEnter (e) {
      console.log(e) // e为容器
      console.log('有源进入')
    },

5、dragover事件：容器监听到有源一直在时持续触发

    handleDragOver (e) {
       e.preventDefault()// 很关键，很必要，drop事件才能生效 ,其作用是：阻止默认行为以允许放置
       console.log('源一直在')
    },

6、dragleave事件：容器监听到有源离开时触发

    handleDragLeave (e) {
      console.log('源离开')
    },

7、drop事件：容器监听到有源降落时触发

    handleDrop (e) {
      console.log('有源降落', e) //e为容器
      this.value1 = this.dragText
    }

三、实操：

1. 如果是el-input ，需要 .native 使用原生方法 

2. 采用js原生方法，获取对象，直接监听对应事件即可

3. 标黄底的1 5 7是最简单的结构

---

20240117补充：

需求：左侧el-tree，拖拽叶子节点至右侧区域，实现对应视频播放。

<el-tree
  :data="data"
  node-key="id"
  default-expand-all
  draggable
  :allow-drag="allowDrag"
  :allow-drop="allowDrop">
</el-tree>

1.  draggable为true，树的结点就可以拖动

2.  allow-drag属性，判断哪种结点可以被拖动，allowDrag(node)：boolean

3.  allow-drop属性，拖拽时判定目标节点能否被放置，allowDrop(draggingNode, dropNode, type)

4.  将结点拖拽至右侧区域时，左侧也会进行相应的树排列，因此直接allow-drop属性直接为false即可