前端提高篇(七十三)：Drag和Drop拖放操作：拖放事件与dataTransfer对象操作

鼠标点在被拖拽元素最左上角时，当鼠标移入target区域，dragenter才触发，鼠标未进入，被拖拽元素进入大半部分了，也还没有触发dragenter事件；

鼠标点在被拖拽元素右边部分时，当鼠标进入target区域，被拖拽元素仅有小部分进入target范围，就已经触发了dragenter事件；

鼠标离开target区域，触发dragleave事件，或者在target区域放开鼠标，触发dragleave事件

drop事件：

在上一个例子中可以看到，鼠标在target区域放开，自动触发的是dragleave事件，被拖拽元素回到原位置，没有保留在鼠标松开的位置，这时候需要解除dragover的默认行为（即dragleave），触发drop事件，允许放置文件

target.addEventListener(‘dragenter’,function(){

console.log(‘dragenter’);

})

target.addEventListener(‘dragover’,function(e){

e.preventDefault();//取消dragover的默认行为

console.log(‘dragover’);

})

target.addEventListener(‘dragleave’,function(){

console.log(‘dragleave’);

})

target.addEventListener(‘drop’,function(){

console.log(‘drop’);

})

可以看到，鼠标在