1.》就是在用户把文件拖住到我们的编辑器时，编辑器样式上需要做出反应，让用户知道拖拽已经进入有效范围，不就是监听一个dragenter和dragleave事件的问题么

1.1》结果写完发现拖拽的时候的改变一直闪动，触发的dragenter事件中总是夹着dragleave

1.2》原因是，鼠标进入事件监听的子元素的时候，会先触发dragleave事件

1.3》原理：当鼠标进入父元素时，添加类名，在此类名下重写它的所有子元素样式，全部添加穿透属性

当鼠标离开时，移除类名。
我们要想实现一个简单的拖拽文件上传，只需要4个属性 drop、dragleave、dragenter、dragover;

2.思路

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

3.vue代码

	  <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.同时可以增加css，保证drag-zone元素dragging-over的时候，子元素的pointer-event都被禁止

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