拖拽元素事件<br/>
ondragstart拖拽前触发<br/>
ondrag拖拽结束之前连续触发<br/>
ondragend 拖拽结束前触发<br/>
目标元素事件<br/>
ondragenter进入目标元素触发 相当于mouseover<br/>
ondragover 进入目标，离开目标之间连续触发<br/>
ondragleave 离开目标元素触发，相当于mouseout<br/>
ondrop 在目标元素上释放鼠标触发<br/>
<!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 oli=document.getElementsByTagName('li');
var odiv=document.getElementById('div4');
var k=0;
for(var i=0; i<oli.length; i++)
{
oli[i].ondragstart=function(){
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(){
alert('要想运行此函数必须在ondragover里阻止默认事件');
}
}
</script>
</head>
<body>
<div id="div2" class="div1">
拖拽元素事件<br/>
ondragstart拖拽前触发<br/>
ondrag拖拽结束之前连续触发<br/>
ondragend 拖拽结束前触发<br/>
目标元素事件<br/>
ondragenter进入目标元素触发 相当于mouseover<br/>
ondragover 进入目标，离开目标之间连续触发<br/>
ondragleave 离开目标元素触发，相当于mouseout<br/>
ondrop 在目标元素上释放鼠标触发<br/>
</div>
<div id="div4" class="div3"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>