-
1 window.οnlοad=function(){ 2 var oDiv=document.getElementById("div1"); 3 var aLi=document.getElementsByTagName('li'); 4 var i=0; 5 for (var i = 0; i < aLi.length; i++) { 6 //dragstart , 拖拽前触发 7 aLi[i].οndragstart=function(){ 8 this.style.backgroundColor="green"; 9 } 10 11 //drag ,拖拽前、拖拽结束之间,连续触发 12 aLi[i].οndrag=function(){ 13 //document.title=i++; 14 } 15 //dragend , 拖拽结束触发 16 aLi[i].οndragend=function(){ 17 this.style.backgroundColor=""; 18 } 19 } 20 21 //dragenter , 进入目标元素触发,相当于mouseover 22 oDiv.οndragenter=function(){ 23 this.style.backgroundColor="teal"; 24 } 25 //dragover ,进入目标、离开目标之间,连续触发 26 //enter和leave之间连续触发 27 oDiv.οndragοver=function(ev){ 28 // document.title=i++; 29 var ev=ev||event; 30 ev.preventDefault(); 31 32 } 33 //dragleave , 离开目标元素触发,相当于mouseout 34 oDiv.οndragleave=function(){ 35 this.style.backgroundColor=""; 36 } 37 38 //drop , 在目标元素上释放鼠标触发 39 //要想触发drop事件必须在dragover当中阻止默认事件 40 oDiv.οndrοp=function(){ 41 alert(123); 42 } 43 }
*{margin: 0;padding: 0;} li{ list-style: none; margin: 10px; width: 100px; height: 30px; background-color: yellow; } #div1{ height: 100px; width: 100px; background-color: red; margin: 200px; }
- b
- c
![](https://i-blog.csdnimg.cn/blog_migrate/3bde1aa7841cf8bc0ce22e2540ea0088.png)
![](https://i-blog.csdnimg.cn/blog_migrate/642ade339a308706f3c5cd05d7053b92.png)