# 04拖拽插件

## 拖拽插件实现

今天在监听body元素的drop事件时候，由于body元素有多个子节点，所有每个子节点都会触发一次事件。

在进入目标区域时，将最后子元素固定为`elemnetNode`节点

在离开区域时进行判断，只有离开时两个DOM节点一样才触发

```javascript
 mounted () {
    const _this = this
    var elementNode = ''
    var dropBox = document.getElementsByTagName('body')[0]
    dropBox.addEventListener('drop', this.enentDrop, false)
    dropBox.addEventListener('dragleave', function (e) {
      e.stopPropagation()
      e.preventDefault()
      if (elementNode === e.target) {
        _this.showModal = false
        _this.borderhover = false
      }
      // _this.$loading().close()
    }, false)
    dropBox.addEventListener('dragenter', function (e) {
      elementNode = e.target
      e.stopPropagation()
      e.preventDefault()
      _this.showModal = true
      _this.borderhover = true
    }, false)
    dropBox.addEventListener('dragover', function (e) {
      e.stopPropagation()
      e.preventDefault()
      _this.borderhover = true
    }, false)
  }
```

## 文件上传

## 参考

[https://blog.csdn.net/qq\_39816673/article/details/89036065](https://blog.csdn.net/qq_39816673/article/details/89036065)

[https://blog.csdn.net/weixin\_34128534/article/details/88759098?depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-3\&utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-3](https://blog.csdn.net/weixin_34128534/article/details/88759098?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3\&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3)

[https://blog.csdn.net/zhq2005095/article/details/89069851](https://blog.csdn.net/zhq2005095/article/details/89069851)
