<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{ 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; bottom: 0;}
.div3{ 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; left: 600px;}
li{display: block; 50px; height: 50px; background: red; margin-top: 10px;}
</style>
<script>
window.onload=function (){
var oul=document.getElementsByTagName('ul')[0];
var oli=document.getElementsByTagName('li');
var odiv=document.getElementById('div4');
var k=0;
for(var i=0; i<oli.length; i++)
{ oli[i].index=i;
oli[i].ondragstart=function(ev){
ev=ev||window.event;
ev.dataTransfer.setData('name',this.index);
ev.dataTransfer.setDragImage(odiv,0,0);
this.style.background='yellow';
}
oli[i].ondrag=function(){
document.title=k++;
}
oli[i].ondragend=function(){
this.style.background='green';
}
}
odiv.ondragenter=function(){
this.style.background='red';
}
odiv.ondragover=function(ev){
document.title=k++;
ev.preventDefault();
}
odiv.ondragleave=function(){
this.style.background='blue';
}
odiv.ondrop=function(ev){
alert(ev.dataTransfer.getData('name',this.index));
oul.removeChild(oli[ev.dataTransfer.getData('name',this.index)]);
for(var i=0; i<oli.length; i++){
oli[i].index=i;
}
}
}
</script>
</head>
<body>
<div id="div2" class="div1">
ev.dataTransfer.setData('name',this.index);
保存当前用户的索引
获取当前用户的索引
oli[ev.dataTransfer.getData('name',this.index)
拖动时候获取的图片
ev.dataTransfer.setDragImage(odiv,0,0); 1参可以是图片 2参坐标 3坐标
</div>
<div id="div4" class="div3"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
ev.dataTransfer.setData('name',this.index); 保存当前用户的索引
ev.dataTransfer.getData('name',this.index）获取当前用户的索引