•  
  

   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     }

  View Code
  

  *{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;
       }

  View Code
  a
• b
• c

 

拖放事件_1