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>
