拖放事件_1

•  

   window.onload=function(){
            var oDiv=document.getElementById("div1");
          var aLi=document.getElementsByTagName('li');
          var  i=0;
           for (var i = 0; i < aLi.length; i++) {
               //dragstart ,  拖拽前触发 
               aLi[i].ondragstart=function(){
                   this.style.backgroundColor="green";
               }
  
                 //drag ,拖拽前、拖拽结束之间，连续触发
                 aLi[i].ondrag=function(){
                     //document.title=i++;
                 }
               //dragend  , 拖拽结束触发
               aLi[i].ondragend=function(){
                   this.style.backgroundColor="";
               }
           }
      
        //dragenter ,  进入目标元素触发，相当于mouseover
        oDiv.ondragenter=function(){
             this.style.backgroundColor="teal";
        }
        //dragover  ,进入目标、离开目标之间，连续触发
        //enter和leave之间连续触发
        oDiv.ondragover=function(ev){
            // document.title=i++;
            var ev=ev||event;
            ev.preventDefault(); 
  
        }
        //dragleave ,  离开目标元素触发，相当于mouseout
        oDiv.ondragleave=function(){
             this.style.backgroundColor="";
        }
  
        //drop  ,  在目标元素上释放鼠标触发
        //要想触发drop事件必须在dragover当中阻止默认事件
        oDiv.ondrop=function(){
             alert(123);
        }
      }

  *{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
• b
• c