1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <title></title>
7 <style type="text/css">
8 *{ margin: 0; padding: 0; -moz-user-select:none;}
9 ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
10 li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}
11 li:hover{ background: #bdb76b; cursor: move;}
12 </style>
13 </head>
14 <body>
15 <ul id="outer_wrap">
16 <li>第一条</li>
17 <li>第二条</li>
18 <li>第三条</li>
19 <li>第四条</li>
20 <li>第五条</li>
21 <li>第六条</li>
22 <li>第七条</li>
23 <li>第八条</li>
24 </ul>
25 <script type="text/javascript">
26 function $(id){
27 return document.getElementById(id);
28 }
29 //获取鼠标位置
30 function getMousePos(e){
31 return {
32 x : e.pageX || e.clientX + document.body.scrollLeft,
33 y : e.pageY || e.clientY + document.body.scrollTop
34 }
35 }
36 //获取元素位置
37 function getElementPos(el){
38 return {
39 x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
40 y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
41 }
42 }
43 //获取元素尺寸
44 function getElementSize(el){
45 return {
46 width : el.offsetWidth,
47 height : el.offsetHeight
48 }
49 }
50 //禁止选择
51 document.onselectstart = function(){
52 return false;
53 }
54 //判断是否有挪动
55 var MOVE = {};
56 MOVE.isMove = false;
57
58 //就是创建的标杆
59 var div = document.createElement('div');
60 div.style.width = '400px';
61 div.style.height = '1px';
62 div.style.fontSize = '0';
63 div.style.background = 'red';
64
65 var outer_wrap = $('outer_wrap');
66 outer_wrap.onmousedown = function(event){
67 //获取列表顺序
68 var lis = outer_wrap.getElementsByTagName('li');
69 for(var i = 0; i < lis.length; i++){
70 lis[i]['pos'] = getElementPos(lis[i]);
71 lis[i]['size'] = getElementSize(lis[i]);
72 }
73 event = event || window.event;
74 var t = event.target || event.srcElement;
75 if(t.tagName.toLowerCase() == 'li'){
76 var p = getMousePos(event);
77 var el = t.cloneNode(true);
78 el.style.position = 'absolute';
79 el.style.left = t.pos.x + 'px';
80 el.style.top = t.pos.y + 'px';
81 el.style.width = t.size.width + 'px';
82 el.style.height = t.size.height + 'px';
83 el.style.border = '1px solid #d4d4d4';
84 el.style.background = '#d4d4d4';
85 el.style.opacity = '0.7';
86 document.body.appendChild(el);
87
88 document.onmousemove = function(event){
89 event = event || window.event;
90 var current = getMousePos(event);
91 el.style.left =t.pos.x + current.x - p.x + 'px';
92 el.style.top =t.pos.y + current.y - p.y+ 'px';
93 document.body.style.cursor = 'move';
94
95 //判断插入点
96 for(var i = 0; i < lis.length; i++){
97 if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){
98 if(t != lis[i]){
99 MOVE.isMove = true;
100 outer_wrap.insertBefore(div,lis[i]);
101 }
102
103 }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){
104 if(t != lis[i]){
105 MOVE.isMove = true;
106 outer_wrap.insertBefore(div,lis[i].nextSibling);
107 }
108 }
109 }
110 }
111 //移除事件
112 document.onmouseup = function(event){
113 event = event || window.event;
114 document.onmousemove = null;
115 if(MOVE.isMove){
116 outer_wrap.replaceChild(t,div);
117 MOVE.isMove = false;
118 }
119 document.body.removeChild(el);
120 el = null;
121 document.body.style.cursor = 'normal';
122 document.onmouseup = null;
123 }
124 }
125 }
126 </script>
127 </body>
128 </html>
