H5元素拖拽使用事件数据传输

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{
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);
}