// 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>
<ul>
<li>字段a-1</li>
<li>字段a-2</li>
<li>字段a-3</li>
<li>字段a-4</li>
<li>字段a-5</li>
</ul>
<ul>
<li>字段b-1</li>
<li>字段b-2</li>
<li>字段b-3</li>
<li>字段b-4</li>
<li>字段b-5</li>
</ul>
</div>
<div>
</div>
</body>
</html>