拖放事件原理及实现详解

移动端现在正是发展高潮期，一说到移动端就会想到的前端技术就是H5啦，它就像一种时尚潮流，now是它的主场，就任性地带着移动端头也不回地走向最高峰~

最近再写一个简单的图片拖拽上传，所以就给大家说下这个拖拽。

先分析一哈拖拽整个过程，方便大家理解哈，在拖拽某元素时，会依次触发以下事件：

dragstart

drag

dragend

ps:在选中被拖动元素时，开始移动鼠标时，会触发dragstart，随后触发drag事件，当鼠标停止移动时会触发dragend,不管是放到了有效的位置还是无效的位置。这里注意,在鼠标移动过程中会持续触发drag事件，mousemove在鼠标移动过程中也会被持续触发。这三个事件的目标都是被拖动元素。

当某个元素被拖放到一个有效位置会依次触发以下事件：

dragenter

dragover

dragleave或drop

ps:在元素被拖放到目标位置上时，会先触发dragenter,随后触发dragover,而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发dragover,若鼠标直接移出目标位置时会触发dragleave，dragover事件不再发生。如果该元素被放到了目标位置就会触发drop，而不会触发dragleave事件，这几个事件的目标都是做为放置的目标元素。

下面来实现一个简单的图片来回拖拽的效果。下面是核心代码：

var dragImg = document.getElementById("dragImg");//获取图片var drop1 = document.getElementById("drop1");//方框一var drop2 = document.getElementById("drop2");//方框二//避免浏览器对数据的默认处理,drop事件的默认行为是以链接形式打开function allowdrop(ev){    ev.preventDefault();}//设置获取被拖放元素的数据格式和值function drag(ev){    ev.dataTransfer.setData("Text",ev.target.id)}//通过获取与上面同格式的数据，即ev.target.id，添加成拖放的目标位置的子元素function drop(ev){    ev.preventDefault();    var data=ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(data));}//被拖放元素开始移动后触发dragstart事件dragImg.ondragstart=function(){    drag(event);};drop2.ondragover = drop1.ondragover=function(){    allowdrop(event);};drop2.ondrop = drop1.ondrop=function(){    drop(event);};