1 *{margin: 0;padding: 0;}
2 li{list-style: none;
3 width: 100px;
4 height: 30px;
5 margin: 10px;
6 background-color: red;
7 text-align: center;
8 }
9 div{
10 height: 100px;
11 width: 100px;
12 background-color: teal;
13 margin: 100px;
14 }
15 img{
16 width: 200px;
17 }
1 var aLi=document.getElementsByTagName("li");
2 var oBox=document.querySelector("#box");
3 var oImg=document.getElementById("myImg");
4 var j=0;
5 for (var i = 0; i < aLi.length; i++) {
6 aLi[i].index=i;
7 aLi[i].ondragstart=function (ev) {
8 var ev=ev||event;
9 //ev.dataTransfer.effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
10 ev.dataTransfer.effectAllowed="copy";
11
12 //ev.dataTransfer.setDragImage 三个参数：指定的元素，坐标X，坐标Y
13 ev.dataTransfer.setDragImage(oImg,0,0);
14 //oImg.style.display="block";
15 this.style.backgroundColor="blue";
16
17 }
18 aLi[i].ondrag=function(ev){
19 document.title=j++;
20 }
21 aLi[i].ondragend=function(){
22 this.style.backgroundColor="yellow";
23 }
24 }
25
26 oBox.ondragenter=function(){
27 this.style.backgroundColor="orange";
28 }
29 oBox.ondragover=function(ev){
30 var ev=ev||event;
31 ev.preventDefault();
32 }
