拖放事件_1

 1  window.onload=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].ondragstart=function(){
 8                  this.style.backgroundColor="green";
 9              }
10
11                //drag ,拖拽前、拖拽结束之间，连续触发
12                aLi[i].ondrag=function(){
13                    //document.title=i++;
14                }
15              //dragend  , 拖拽结束触发
16              aLi[i].ondragend=function(){
17                  this.style.backgroundColor="";
18              }
19          }
20
21       //dragenter ,  进入目标元素触发，相当于mouseover
22       oDiv.ondragenter=function(){
23            this.style.backgroundColor="teal";
24       }
25       //dragover  ,进入目标、离开目标之间，连续触发
26       //enter和leave之间连续触发
27       oDiv.ondragover=function(ev){
28           // document.title=i++;
29           var ev=ev||event;
30           ev.preventDefault();
31
32       }
33       //dragleave ,  离开目标元素触发，相当于mouseout
34       oDiv.ondragleave=function(){
35            this.style.backgroundColor="";
36       }
37
38       //drop  ,  在目标元素上释放鼠标触发
39       //要想触发drop事件必须在dragover当中阻止默认事件
40       oDiv.ondrop=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;
     }

a