04拖拽插件

拖拽插件实现

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

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

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

 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