<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> li{ margin:10px; width:100px; height:30px; list-style:none; background:yellow;} #div1{ width:200px; height:200px; background:red; margin:200px;} </style> <script type="text/javascript"> //拖放 draggable :设置为true 就可以拖放了 //拖拽元素事件：ondragstart 拖拽前触发 //ondrag 拖拽之间触发 //ondragend 拖拽结束触发 window.onload=function(){ var aLi=document.getElementsByTagName("li"); var oDiv=document.getElementById("div1"); var i=0; for(var i=0;i<aLi.length;i++) { aLi[i].ondragstart=function()//拖拽前触发 { this.style.background="green"; } aLi[i].ondrag=function()//开始与结束连续触发 { //document.title=i++; } aLi[i].ondragend=function()//拖拽结束触发 { this.style.background="yellow"; } } //目标元素事件： //ondragenter 进入目标元素触发，相当于mouseover //ondragover 进入目标，离开目标之间，连续触发 //ondragleave 离开目标元素触发，相当于mouseout //drop 在目标元素上释放鼠标触发 oDiv.ondragenter=function() { this.style.background="green"; } oDiv.ondragover=function(ev)//enter和leave之间触发 { //document.title=i++; ev.preventDefault(); } oDiv.ondragleave=function() { this.style.background="red"; } oDiv.ondrop=function() { alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。 } //事件执行顺序：drop不触发的时候 //dragstart>drag>dragenter>dragover>dragleave>dragend //事件执行顺序： drop触发的时候（dragover的时候阻止默认事件） //dragstart>drag>dragenter>dragover>drop>dragend } </script> </head> <body> <ul> <li draggable="true">a</li> <li draggable="true">b</li> <li draggable="true">c</li> </ul> <div id="div1"></div> </body> </html>