拖拽事件_2

•    *{margin: 0;padding: 0;}
     li{list-style: none;
         height: 30px;
         width: 100px;
         margin: 10px;
         background-color: yellow;}
     #div1{
          margin: 100px;
          height: 100px;
          width: 100px;
          background-color: red;
     }

  window.onload=function(){
      var oUl=document.querySelector("ul");
      var aLi=document.getElementsByTagName('li');
      var oDiv=document.getElementById("div1");
      var i=0;
      for(var i=0;i<aLi.length;i++){
           aLi[i].index=i;
          aLi[i].ondragstart=function(ev){
              var ev=ev||event;
              //dataTransfer.setData():设置数据 key和value(必须是字符串)
              ev.dataTransfer.setData("index",this.index);;
              this.style.backgroundColor="red";
          }
          aLi[i].ondrag=function(){
              document.title=i++;
          }
          aLi[i].ondragend=function(){
              this.style.backgroundColor="teal";
          }
      }
  
      oDiv.ondragenter=function(){
          this.style.background="yellow";
      }
      oDiv.ondragover=function(ev){
          var ev=ev||event;
          ev.preventDefault();
          document.title=i++;
      }
      oDiv.ondrop=function(ev){
          var ev=ev||event;
          //ev.dataTransfer.getData()获取数据，根据key值，获取对应的value
          //alert(ev.dataTransfer.getData("index"));
          var index=ev.dataTransfer.getData("index");
          oUl.removeChild(aLi[index]);
          for(var i=0;i<aLi.length;i++){
              aLi[i].index=i;
          }
      }
      oDiv.ondragend=function(){
          this.style.backgroundColor="";
      }
  
  }

   

  a
• b
• c