代码比较冗余，还没来得及做整理，往见谅。
主要用到的 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="http://www.likecs.com/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";