<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
width: 100px;
height: 50px;
margin: 10px;
background: red;
}
#div{
width: 200px;
height: 100px;
background: blue;
margin-top: 200px;
}
</style>
<script>
onload= function () {
/* 解决ff下的bug：必须设置dataTransfer对象的setData方法才能拖拽出图片以外的标签；
1.dataTransfer对象：针对拖放新有的对象，是ev下的对象；
①setData():设置数据key和value(必须是字符串)；
②getData():获取数据，根据key值，获取对应的value；
*/
var aLi=document.getElementsByTagName('li');
var oDiv=document.getElementById('div');
for(var i =0;i<aLi.length;i++){
aLi[i].ondragstart= function (ev) {
ev=ev||event;
ev.dataTransfer.setData('name','Garven');
this.style.background='green';
}
aLi[i].ondrag= function () {
}
aLi[i].ondragend= function () {
this.style.background='red';
}
}
oDiv.ondragenter= function () {
this.style.background='red';
}
oDiv.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
}
oDiv.ondragleave= function () {
this.style.background='blue';
}
oDiv.drop= function (ev) {
alert(ev.dataTransfar.getData('name'));
alert('helo!');
}
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div id="div"></div>
</body>
</html>