1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 li { 8 list-style: none; 9 background: orange; 10 width: 180px; 11 height: 30px; 12 margin: 10px; 13 font:normal 12px/2em "微软雅黑"; 14 text-align: center; 15 } 16 17 #div1 { 18 width: 200px; 19 height: 200px; 20 background: #ff0000; 21 margin: 20px; 22 } 23 </style> 24 </head> 25 <body> 26 27 <ul> 28 <li draggable="true">你爱我像谁</li> 29 <li draggable="true">选择</li> 30 <li draggable="true">胆小鬼</li> 31 <li draggable="true">再见</li> 32 <li draggable="true">少年游</li> 33 <li draggable="true">泡沫</li> 34 <li draggable="true">跟着感觉走</li> 35 <li draggable="true">浮夸</li> 36 <li draggable="true">光辉岁月</li> 37 </ul> 38 <script> 39 window.onload = function(){ 40 var oUl = document.getElementsByTagName("ul")[0]; 41 var oLi = document.getElementsByTagName('li'); 42 var img = document.getElementsByTagName('img')[0]; 43 for(var i = 0; i<oLi.length;i++){ 44 oLi[i].index = i; 45 oLi[i].ondragstart = function(ev){ 46 this.style.backgroundColor = "yellow"; 47 ev.dataTransfer.setData('index',this.index); 48 ev.dataTransfer.effectAllowed = "copy"; 49 }; 50 oLi[i].ondragend = function(ev){ 51 this.style.backgroundColor = "orange"; 52 }; 53 oLi[i].ondragover= function(ev){ 54 ev.preventDefault(); 55 }; 56 oLi[i].ondrop = function(ev){ 57 var flag = ev.dataTransfer.getData('index'); 58 var node = oLi[flag]; 59 oUl.insertBefore(node,this.nextSibling); 60 61 for(var i = 0; i<oLi.length;i++){ 62 oLi[i].index = i; 63 } 64 }; 65 } 66 } 67 </script> 68 </body> 69 </html>