> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vuecli/04-tuo-zhuai-cha-jian.md).

# 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/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>