原生JS 实现元素排序

浏览数：30 / 时间：2015年06月08日

  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>