拖拽事件_3

 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].οndragstart=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].οndrag=function(ev){
19         document.title=j++;
20     }
21     aLi[i].οndragend=function(){
22         this.style.backgroundColor="yellow";
23     }
24 }
25 
26 oBox.οndragenter=function(){
27     this.style.backgroundColor="orange";
28 }
29 oBox.οndragοver=function(ev){
30     var  ev=ev||event;
31     ev.preventDefault();
32 }

 

• a
• b
• c

 

转载于:https://www.cnblogs.com/zz-mystudy/p/6832884.html