移動端現在正是發展高潮期，一說到移動端就會想到的前端技術就是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);
};