js拖拽事件的处理

拖拽事件的处理

需求是这样的，需要实现拖入文件到聊天框后，显示遮罩层，松开后发送文件

遇到问题：拖入文件进入聊天框后，因为聊天框中已经加载的样式较多。就会出现enter leave enter leave不断重复触发的场景。遮罩层一直在闪烁。

先说下原因吧，父元素设置监听拖拽后，当拖拽元素进入该元素后，如果该元素内部仍有许多元素，那么这个拖拽元素每进入一个新的元素就会触发一次enter，离开就会触发leave。

所以我们就需要在enter的时候做一次标记，确保离开的是父元素而不是内部的某个子元素，

还是烦了一段时间了。

<template>
<div class="index_box">  
  <div class="bg" v-show="imgFlag">
    <span class="bg-tip" v-show="!isShowProgress">Drop here to send</span>
<el-progress v-show="isShowProgress" class="prgress" type="circle" :percentage="percent" style="margin-top: 20px"></el-progress>
	</div>  
</div>
</template>


mounted() {
  this.handleListenerDrag()
},
methos: {
  // 监听拖拽
  handleListenerDrag () {
    const dropEle = $('.index_box')// 监听的元素
    let lastenter = null
    dropEle.on('dragenter', function (ev) {
      lastenter = ev.target // 记录最后进入的元素
      if (this.imgFlag = true) {
        return
      }
      dropEle.addClass('dragging-over')
      this.imgFlag = true
    }.bind(this))
    dropEle.on('dragleave', function (ev) {
      if (lastenter === ev.target) {
        dropEle.removeClass('dragging-over')
        ev.stopPropagation()
        ev.preventDefault()
        this.imgFlag = false
        this.percent = 0
        this.isShowProgress = false
      }
    }.bind(this))
    dropEle.on('drop', function (ev) {
      this.handleDragOver(ev.originalEvent)
      dropEle.removeClass('dragging-over')
    }.bind(this))
  },
  // 发送
  handleDragOver() {
      
  }
}


<style>
.index_box {
  position: relative;
  width: 100%;
  height: 100%;
}
/deep/.el-progress__text {
  text-align: center;
}
.bg {
  background-color: rgba(255,255,255,.6);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  .bg-tip {
    font-size: 16px;
    font-weight: bold;
  }
}
.dragging-over {
  pointer-events: none;
}  
</style>