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>