H5中元素拖拽可以用元素拖拽事件實現，用event可以縮短程式碼長度。

先看一般的拖拽方法

實現效果：將圖片1235拖到圖片4中將拖入圖片刪除

<img id="img1" src="img/01.png" />
<img id="img2" src="img/02.png" />
<img id="img3" src="img/03.png" />
<img id="img5" src="img/05.png" />
<img src="img/04.png" id="cancel" />

定義五張圖片 

img{
width: 150px;
height: 150px;
border: 1px solid red;
margin: 10px 50px;
}

給上樣式

開始寫js部分

var cancel = document.getElementById("cancel");        //獲取 垃圾桶 （將元素拖入此圖片時刪除） 
document.ondragstart = function(){                            //元素開始拖拽時觸發事件
event.dataTransfer.setData("text",event.target.id);    //獲取當前元素的id 用text的資料型別儲存
console.log(event.target.id)                                  //可以在控制檯打印出來看看
}
document.ondragover = function(){                          //在ondrageover事件中阻止瀏覽器對元素的預設行為
event.preventDefault();
}
cancel.ondrop = function(){                                      //滑鼠在元素目標上鬆開滑鼠時觸發的事件
var objId = event.dataTransfer.getData("text");         //定義變數objId 用來接收 前面獲取的id值
console.log(document.getElementById(objId));       //控制檯列印檢查
console.log(event.target);
event.target.parentNode.removeChild(document.getElementById(objId));               //通過父元素刪除前面被拖拽的元素  通過前面獲取的id名直接獲取元素
}

整個拖拽到垃圾桶刪除圖片就完成了。

還有不使用 事件資料傳輸 event.dataTransfer.setData  

定義一個變數接收在ondragstart 中當前拖拽的物件

可以不用給每個圖片定義id名。程式碼如下：

var obj;
var cancel = document.getElementById("cancel");
document.ondragstart = function(event){
　　obj = event.target;
}
document.ondragover = function(event){
event.preventDefault();
}
cancel.ondrop = function(){
　　obj.parentNode.removeChild(obj);
}