拖拽事件_3

*{margin: 0;padding: 0;}
li{list-style: none;
   width: 100px;
   height: 30px;
   margin: 10px;
   background-color: red;
   text-align: center;
}
div{
    height: 100px;
    width: 100px;
    background-color: teal;
    margin: 100px;
}
img{
  width: 200px;
}

var aLi=document.getElementsByTagName("li");
var oBox=document.querySelector("#box");
var oImg=document.getElementById("myImg");
var j=0;
for (var i = 0; i < aLi.length; i++) {
    aLi[i].index=i;
    aLi[i].ondragstart=function  (ev) {
        var ev=ev||event;
        //ev.dataTransfer.effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
        ev.dataTransfer.effectAllowed="copy";
        
        //ev.dataTransfer.setDragImage 三个参数：指定的元素，坐标X，坐标Y
        ev.dataTransfer.setDragImage(oImg,0,0);
        //oImg.style.display="block";
        this.style.backgroundColor="blue";
        
    }
    aLi[i].ondrag=function(ev){
        document.title=j++;
    }
    aLi[i].ondragend=function(){
        this.style.backgroundColor="yellow";
    }
}

oBox.ondragenter=function(){
    this.style.backgroundColor="orange";
}
oBox.ondragover=function(ev){
    var  ev=ev||event;
    ev.preventDefault();
}

 

• a
• b
• c