代码比较冗余，还没来得及做整理，往见谅。
主要用到的 JS 事件有：
onmousedown：鼠标点下事件
onmousemove：鼠标移动事件
onmouseup：鼠标放开事件
具体代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列拖动</title> <style type="text/css"> body,ul,li {padding: 0; margin: 0;} ul, li {list-style: none;} .left {width: 300px; float: left;margin: 3px;} .right {width: 300px; float: left; margin:3px;} .column {width: 200px;height: 30px; line-height: 30px; background-color: #AACCFF; margin: 8px 5px; text-align: center; cursor: pointer;} .columnOld {width: 200px; height: 30px; line-height: 30px; background-color: #CCC; margin: 8px 5px; text-align: center;} .target {border: 1px solid #CCC; background-color: #FFF5EE;box-shadow: 0 0 8px #CCC; -moz-box-shadow: 0 0 8px #CCC; -webkit-box-shadow: 0 0 8px #CCC;} .container {width: 600px; height: 200px; display: block;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var Lis = document.getElementsByClassName("column"); var container = document.getElementsByClassName("container")[0]; for (var i = Lis.length - 1; i >= 0; i--) { var obj = Lis[i]; var source = obj.parentNode; var target = document.getElementById("container"); moveColumn(obj, target, source); } } /** * 字段拖拽事件 */ function moveColumn(obj, target, source) { // 1. 获取事件 obj.onmousedown = function(event) { var ev = event || window.event; // 2. 复制新节点，设置透明度和innerHTML，class var newObj = document.createElement("li"); newObj.className = 'column'; newObj.style.opacity = '0.5'; newObj.style.filter = 'alpha(opacity:50)'; newObj.innerHTML = obj.innerHTML; newObj.style.margin = '0'; newObj.style.position = 'absolute'; newObj.style.zIndex = '5'; newObj.source = source; // 3. 计算点击点在 obj 上的位置 var disH = ev.clientY - obj.offsetTop; var disL = ev.clientX - obj.offsetLeft; // 4. 设置绝对定位的top和left newObj.style.top = obj.offsetTop + 'px'; newObj.style.left = obj.offsetLeft + 'px'; // 5. 添加节点 obj.parentNode.appendChild(newObj); // 6. 鼠标移动事件 document.onmousemove = function(e) { // 1. 获取事件 var e = e || window.event; // 2. 获取鼠标位置，设置newObj的定位 var L = e.clientX - disL; var T = e.clientY - disH; newObj.style.top = T + 'px'; newObj.style.left = L + 'px'; // 3. source 背景色和边框变换 $(target).addClass("target"); obj.className = "columnOld"; } // 7. 鼠标松开事件 document.onmouseup = function() { $(target).removeClass("target"); // target.class = ''; var not = newObj.offsetTop; var nol = newObj.offsetLeft; var tot = target.offsetTop; var tol = target.offsetLeft; if (not >= tot && nol >= tol && not <= tot + target.offsetHeight && nol <= tol + target.offsetWidth) { newObj.removeAttribute('style'); newObj.className = "column"; newObj.style.float = "left"; target.appendChild(newObj); backColumn(newObj, source, target); var id = obj.id; newObj.id = id; obj.id = id + "_old"; obj.onmousedown = null; } else { obj.className = "column"; obj.parentNode.removeChild(newObj); } document.onmouseup = null; document.onmousemove = null; } } } function backColumn(obj, target, source) { var Lis = source.getElementsByTagName('li'); var lineNum = Math.floor(source.offsetWidth / 210); var liFirst = Lis[0].offsetTop; var liHeight = Lis[0].offsetHeight; var liWidth = Lis[0].offsetWidth; // 1. 获取事件 obj.onmousedown = function(event) { var ev = event || window.event; // 2. 复制新节点，设置透明度和innerHTML，class var newObj = document.createElement("li"); newObj.className = 'column'; newObj.style.opacity = '0.5'; newObj.style.filter = 'alpha(opacity:50)'; newObj.innerHTML = obj.innerHTML; newObj.style.margin = '0'; newObj.style.position = 'absolute'; newObj.style.zIndex = '5'; // 3. 计算点击点在 obj 上的位置 var disH = ev.clientY - obj.offsetTop; var disL = ev.clientX - obj.offsetLeft; // 4. 设置绝对定位的top和left newObj.style.top = obj.offsetTop + 'px'; newObj.style.left = obj.offsetLeft + 'px'; // 5. 添加节点 obj.parentNode.appendChild(newObj); // 6. 添加空白节点（占位） var blank = document.createElement("li"); blank.className = 'column'; blank.style.backgroundColor = '#63B8FF'; blank.style.float = "left"; // 6. 鼠标移动事件 document.onmousemove = function(e) { // 1. 获取事件 var e = e || window.event; // 2. 获取鼠标位置，设置newObj的定位 var L = e.clientX - disL; var T = e.clientY - disH; newObj.style.top = T + 'px'; newObj.style.left = L + 'px'; // 3. source 背景色和边框变换 $(target).addClass("target"); obj.className = "columnOld"; // 根据当前拖拽到的位置计算其重新排序后的位置 var line = lineNum * Math.round((T - liFirst)/liHeight) var n = line + Math.floor(L / liWidth); // 将空白节点插入到该位置 // if () source.insertBefore(blank,source.children[n]); } // 7. 鼠标松开事件 document.onmouseup = function() { $(target).removeClass("target"); // target.class = ''; var not = newObj.offsetTop; var nol = newObj.offsetLeft; var tot = target.offsetTop; var tol = target.offsetLeft; if (not >= tot && nol >= tol && not <= tot + target.offsetHeight && nol <= tol + target.offsetWidth) { var oldObj = document.getElementById(obj.id + '_old'); oldObj.className = 'column'; source.removeChild(newObj); source.removeChild(obj); oldObj.id = obj.id; moveColumn(oldObj, source, target); obj.onmousedown = null; } else { obj.className = "column"; obj.parentNode.removeChild(newObj); // 将被拖拽的元素插入到空白节点的位置 if (blank.parentNode == source) { source.insertBefore(obj,blank); } // 删除拖拽样式 // obj.removeAttribute('style'); } if (blank.parentNode == source) { // 删除空白节点 source.removeChild(blank); } document.onmouseup = null; document.onmousemove = null; } } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } </script> </head> <body> <div style="overflow: hidden;"> <ul class="left"> <li class="column" id="c1">字段a-1</li> <li class="column" id="c2">字段a-2</li> <li class="column" id="c3">字段a-3</li> <li class="column" id="c4">字段a-4</li> <li class="column" id="c5">字段a-5</li> </ul> <ul class="right"> <li class="column" id="c6">字段b-1</li> <li class="column" id="c7">字段b-2</li> <li class="column" id="c8">字段b-3</li> <li class="column" id="c9">字段b-4</li> <li class="column" id="c10">字段b-5</li> </ul> </div> <div class="container" id="container"> </div> </body> </html>