Imitate Baidu Netdisk's full-screen drag-and-drop to upload files, dragenter drag-in, dragleave drag-out, and enentDrop drag-and-drop to solve the problem of releasing the mouse

1.》When the user drags the file to our editor, the editor style needs to react to let the user know that the drag has entered the valid range. Isn't it a matter of monitoring a dragenter and dragleave event?

1.1》After writing the results, I found that the changes during dragging kept flashing, and the triggered dragenter event always contained dragleave.

1.2》The reason is that when the mouse enters the child element monitored by the event, the dragleave event will be triggered first.

1.3》Principle: When the mouse enters the parent element, add a class name, rewrite the styles of all its child elements under this class name, and add penetration attributes to all

When the mouse leaves, remove the class name.
If we want to implement a simple drag-and-drop file upload, we only need four attributes: drop, dragleave, dragenter, and dragover;

2. Ideas

	.第一步 dragenter() 是当选中的文件移入到拖拽的区域会触发此方法
	第二步 dragover() 是在拖拽的区域不断的移动会触发此方法
	第三步 enentDrop() 鼠标在拖拽的区域松开鼠标，释放拖拽的问题会触发此方法
	第四步 dragleave() 是拖拽的文件离开拖拽的区域会触发此方法

3.vue code

	  <div 
	        class="drag_ent"
	        @dragenter="dragenter($event)"
	        @dragleave="dragleave($event)"
	        @drop="enentDrop($event)"
	        @dragover="dragover($event)"
	        >
	          <el-upload
	        class="upload-demo-two"
	        drag
	        action="#"
	        multiple
	        :on-preview="handlePreview"
	        :http-request="http_request"
	        :before-upload="beforeAvatarUpload"
	        :on-change="handle_Change"
	        v-show="inshow"
	        >
	        <i class="el-icon-upload"></i>
	        <div class="el-upload__text">将文件拖到此处上传</div>
	        <!-- ，或<em>点击上传</em> -->
	        <div class="el-upload__tip" style="margin-bottom:50px;" slot="tip"></div>
	      </el-upload>
	        </div>
	        <script>
	        export default {
			  data() {
				    return {
				    	lastenter :null,
				      };
			  },
			  methods:{
			  //三个事件
			   dragenter(e){
				      console.log(e.target,"进入");
				      let elm = $(".drag_ent")
				        this.lastenter = e.target
				        elm.addClass('dragging-over')
				        this.inshow = true
				    },
				    dragleave(e){
				      console.log(e.target,"离开");
				      let elm = $(".drag_ent")
				         if(this.lastenter === e.target){ 
				              console.log('dragleave', e.target);
				               elm.removeClass('dragging-over');
				                e.stopPropagation();
				                e.preventDefault();
				              this.inshow = false
				
				          }
				    },
				    enentDrop(e){
				   console.log(e.target,"放手");
			       let elm = $(".drag_ent")
			         elm.removeClass('dragging-over');
			         this.inshow = false
				          
				    },
				     dragover(e){   //在IE11下，需要增加对dragover事件的默认阻止，否则不会触发drop事件
					      console.log("dragover");
					         e.preventDefault();
					    },
				}
					  }
				  </script>

4. At the same time, you can add css to ensure that when the drag-zone element is dragging-over, the pointer-events of the child elements are prohibited.

.dragging-over *{
  pointer-events: none;
}