<!doctype html> |
<html> |
<head> |
<meta charset= "utf-8" > |
<title>固定div层拖动</title> |
<style type= "text/css" > |
body { |
width: 100%; |
max-height: 100%; |
padding: 0px; |
margin: 0px; |
text-align: center; |
} |
.cell { |
float: left; |
clear: right; |
} |
.row { |
clear: both; |
} |
.r_nbsp { |
width: 20px; |
} |
.root { |
width: 868px; |
margin: 0 auto; |
} |
.root * { |
/*次属性FF的说*/ |
-moz-user-select: none; |
} |
.line { |
width: 202px; |
line-height: 20px; |
height: 20px; |
overflow: hidden; |
font-size: 12px; |
} |
.move { |
border: #CCCCCC 1px solid; |
width: 200px; |
height: aotu; |
} |
.title { |
height: 24px; |
cursor: move; |
background: #0080C0; |
font-size: 12px; |
font-weight: bold; |
color: #FFFFFF; |
line-height: 24px; |
text-align: center; |
} |
.content { |
border-top: #CCCCCC 1px solid; |
height: 100px; |
background-color: #F7F7F7; |
} |
.CDrag_temp_div { |
border: #CCCCCC 1px dashed; |
} |
</style> |
<script type= "text/javascript" > |
var Class = { |
//创建类 |
create: function () { |
return function () { |
this .initialize.apply( this , arguments); |
}; |
} |
}; |
|
var $A = function (a) { |
//转换数组 |
return a ? Array.apply( null , a) : new Array; |
}; |
|
var $ = function (id) { |
//获取对象 |
return document.getElementById(id); |
}; |
|
Object.extend = function (a, b) { |
//追加方法 |
for ( var i in b) a[i] = b[i]; |
return a; |
}; |
|
Object.extend(Object, { |
|
addEvent : function (a, b, c, d) { |
//添加函数 |
if (a.attachEvent) a.attachEvent(b[0], c); |
else a.addEventListener(b[1] || b[0].replace(/^on/, "" ), c, d || false ); |
return c; |
}, |
|
delEvent : function (a, b, c, d) { |
if (a.detachEvent) a.detachEvent(b[0], c); |
else a.removeEventListener(b[1] || b[0].replace(/^on/, "" ), c, d || false ); |
return c; |
}, |
|
reEvent : function () { |
//获取Event |
return window.event ? window.event : ( function (o) { |
do { |
o = o.caller; |
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0])); |
return o.arguments[0]; |
})( this .reEvent); |
} |
|
}); |
|
Function.prototype.bind = function () { |
//绑定事件 |
var wc = this , a = $A(arguments), o = a.shift(); |
return function () { |
wc.apply(o, a.concat($A(arguments))); |
}; |
}; |
|
|
var Table = Class.create(); |
|
Table.prototype = { |
|
initialize : function () { |
//初始化 |
var wc = this ; |
wc.cols = new Array; //创建列 |
}, |
|
addCols : function (o) { |
//添加列 |
var wc = this , cols = wc.cols, i = cols.length; |
return cols[i] = { |
id : i, div : o, rows : new Array, //创建行 |
addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow |
}; |
}, |
|
addRow : function (o) { |
//添加行 |
var wc = this , rows = wc.rows, i = rows.length; |
return rows[i] = { |
id : i, div : o, cols : wc |
}; |
}, |
|
inRow : function (a, b) { |
//插入行 |
var wc = b.cols = this , rows = wc.rows, i; |
if (a < rows.length) { |
for (i = a ; i < rows.length ; i ++) rows[i].id ++; |
rows.splice(a, 0, b); |
b.id = a; |
return b; |
} else { |
b.id = rows.length; |
return rows[b.id] = b; |
} |
}, |
|
delRow : function (a) { |
//删除列 |
var wc = this , rows = wc.rows, i, r; |
if (a >= rows.length) return ; |
r = rows[a]; |
rows.splice(a, 1); |
for (i = a ; i < rows.length ; i ++) rows[i].id = i; |
return r; |
} |
}; |
var CDrag = Class.create(); |
|
CDrag.IE = /MSIE/.test(window.navigator.userAgent); |
|
CDrag.prototype = { |
|
initialize : function () { |
//初始化成员 |
var wc = this ; |
wc.table = new Table; //建立表格对象 |
wc.iFunc = wc.eFunc = null ; |
wc.obj = { on : { a : null , b : "" }, row : null , left : 0, top : 0 }; |
wc.temp = { row : null , div : document.createElement( "div" ) }; |
wc.temp.div.setAttribute(CDrag.IE ? "className" : "class" , "CDrag_temp_div" ); |
wc.temp.div.innerHTML = " " ; |
}, |
|
reMouse : function (a) { |
//获取鼠标位置 |
var e = Object.reEvent(); |
return { |
x : document.documentElement.scrollLeft + e.clientX, |
y : document.documentElement.scrollTop + e.clientY |
}; |
}, |
|
rePosition : function (o) { |
//获取元素绝对位置 |
var $x = $y = 0; |
do { |
$x += o.offsetLeft; |
$y += o.offsetTop; |
} while ((o = o.offsetParent) && o.tagName != "BODY" ); |
return { x : $x, y : $y }; |
}, |
|
sMove : function (o) { |
//当拖动开始时设置参数 |
|
var wc = this ; |
if (wc.iFunc || wc.eFinc) return ; |
|
var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div); |
|
obj.row = o; |
obj.on.b = "me" ; |
obj.left = mouse.x - position.x; |
obj.top = mouse.y - position.y; |
|
temp.row = document.body.appendChild(div.cloneNode( true )); //复制预拖拽对象 |
|
with (temp.row.style) { |
//设置复制对象 |
position = "absolute" ; |
left = mouse.x - obj.left + "px" ; |
top = mouse.y - obj.top + "px" ; |
zIndex = 100; |
opacity = "0.3" ; |
filter = "alpha(opacity:30)" ; |
} |
|
with (temp.div.style) { |
//设置站位对象 |
height = div.clientHeight + "px" ; |
width = div.clientWidth + "px" ; |
} |
|
|
/*div.parentNode.insertBefore(temp.div, div); |
div.style.display = "none"; //隐藏预拖拽对象*/ |
div.parentNode.replaceChild(temp.div, div); |
|
wc.iFunc = Object.addEvent(document, [ "onmousemove" ], wc.iMove.bind(wc)); |
wc.eFunc = Object.addEvent(document, [ "onmouseup" ], wc.eMove.bind(wc)); |
document.onselectstart = new Function( "return false" ); |
}, |
|
iMove : function () { |
//当鼠标移动时设置参数 |
var wc = this , cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row, |
t_position, t_cols, t_rows, i, j; |
|
with (div.style) { |
left = mouse.x - obj.left + "px" ; |
top = mouse.y - obj.top + "px" ; |
} |
|
for (i = 0 ; i < cols.length ; i ++) { |
t_cols = cols[i]; |
t_position = wc.rePosition(t_cols.div); |
if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) { |
if (t_cols.rows.length > 0) { //如果此列行数大于0 |
if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) { |
//如果鼠标位置大于第一行的位置即是最上。。 |
//向上 |
obj.on.a = t_cols.rows[0]; |
obj.on.b = "up" ; |
obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div); |
} else if (t_cols.rows.length > 1 && t_cols.rows[0] == row && |
wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) { |
//如果第一行是拖拽对象而第鼠标大于第二行位置则,没有动。。 |
//向上 |
obj.on.b = "me" ; |
t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div); |
} else { |
for (j = t_cols.rows.length - 1 ; j > -1 ; j --) { |
//重最下行向上查询 |
t_rows = t_cols.rows[j]; |
if (t_rows == obj.row) continue ; |
if (wc.rePosition(t_rows.div).y < mouse.y) { |
//如果鼠标大于这行则在这行下面 |
if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) { |
//如果这行有下一行则重这行下一行的上面插入 |
t_cols.rows[t_rows.id + 1].div.parentNode. |
insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div); |
obj.on.a = t_rows; |
obj.on.b = "down" ; |
} else if (t_rows.id + 2 < t_cols.rows.length) { |
//如果这行下一行是拖拽对象则插入到下两行,即拖拽对象返回原位 |
t_cols.rows[t_rows.id + 2].div.parentNode. |
insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div); |
obj.on.b = "me" ; |
} else { |
//前面都没有满足则放在最低行 |
t_rows.div.parentNode.appendChild(temp.div); |
obj.on.a = t_rows; |
obj.on.b = "down" ; |
} |
return ; |
} |
} |
} |
} else { |
//此列无内容添加新行 |
t_cols.div.appendChild(temp.div); |
obj.on.a = t_cols; |
obj.on.b = "new" ; |
} |
} |
} |
}, |
|
eMove : function () { |
//当鼠标释放时设置参数 |
var wc = this , obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols; |
|
if (obj.on.b == "up" ) { |
//向最上添加 |
o_cols = obj.row.cols; |
n_cols = obj.on.a.cols; |
n_cols.inRow(0, o_cols.delRow(obj.row.id)); |
} else if (obj.on.b == "down" ) { |
//相对向下添加 |
o_cols = obj.row.cols; |
n_cols = obj.on.a.cols; |
n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id)); |
} else if (obj.on.b == "new" ) { |
//向无内容列添加 |
o_cols = obj.row.cols; |
n_cols = obj.on.a; |
n_cols.inRow(0, o_cols.delRow(obj.row.id)); |
} |
|
temp.div.parentNode.replaceChild(div, temp.div); |
temp.row.parentNode.removeChild(temp.row); |
delete temp.row; |
|
Object.delEvent(document, [ "onmousemove" ], wc.iFunc); |
Object.delEvent(document, [ "onmouseup" ], wc.eFunc); |
document.onselectstart = wc.iFunc = wc.eFunc = null ; |
}, |
|
add : function (o) { |
//添加对象 |
var wc = this ; |
Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], [ "onmousedown" ], wc.sMove.bind(wc, o)); |
}, |
|
parse : function (o) { |
//初始化成员 |
var wc = this , table = wc.table, cols, i, j; |
for (i = 0 ; i < o.length ; i ++) { |
cols = table.addCols(o[i].cols); |
for (j = 0 ; j < o[i].rows.length ; j ++) |
wc.add(cols.addRow(o[i].rows[j])); |
} |
} |
|
}; |
|
Object.addEvent(window, [ "onload" ], function () { |
var wc = new CDrag; |
wc.parse([ |
|
{ |
cols : $( "m_1" ), rows : [$( "m_1_1" ), $( "m_1_2" ), $( "m_1_3" ), $( "m_1_4" )] |
}, |
|
{ |
cols : $( "m_2" ), rows : [$( "m_2_1" ), $( "m_2_2" ), $( "m_2_3" ), $( "m_2_4" )] |
}, |
|
{ |
cols : $( "m_3" ), rows : [$( "m_3_1" ), $( "m_3_2" ), $( "m_3_3" ), $( "m_3_4" )] |
}, |
|
{ |
cols : $( "m_4" ), rows : [$( "m_4_1" ), $( "m_4_2" ), $( "m_4_3" ), $( "m_4_4" )] |
} |
|
]); |
}); |
</script> |
</head> |
<body> |
<br /> |
<div class= "root" > |
<div class= "cell" id= "m_1" > |
<div class= "line" > 第一列</div> |
<div class= "move" id= "m_1_1" > |
<div class= "title" > 第一列的第一个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_1_2" > |
<div class= "title" > 第一列的第二个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_1_3" > |
<div class= "title" > 第一列的第三个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_1_4" > |
<div class= "title" > 第一列的第四个div</div> |
<div class= "content" > </div> |
</div> |
</div> |
<div class= "cell r_nbsp" > </div> |
<div class= "cell" id= "m_2" > |
<div class= "line" > 第二列</div> |
<div class= "move" id= "m_2_1" > |
<div class= "title" > 第二列的第一个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_2_2" > |
<div class= "title" > 第二列的第二个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_2_3" > |
<div class= "title" > 第二列的第三个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_2_4" > |
<div class= "title" > 第二列的第四个div</div> |
<div class= "content" > </div> |
</div> |
</div> |
<div class= "cell r_nbsp" > </div> |
<div class= "cell" id= "m_3" > |
<div class= "line" > 第三列</div> |
<div class= "move" id= "m_3_1" > |
<div class= "title" > 第三列的第一个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_3_2" > |
<div class= "title" > 第三列的第二个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_3_3" > |
<div class= "title" > 第三列的第三个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_3_4" > |
<div class= "title" > 第三列的第四个div</div> |
<div class= "content" > </div> |
</div> |
</div> |
<div class= "cell r_nbsp" > </div> |
<div class= "cell" id= "m_4" > |
<div class= "line" > 第四列</div> |
<div class= "move" id= "m_4_1" > |
<div class= "title" > 第四列的第一个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_4_2" > |
<div class= "title" > 第四列的第二个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_4_3" > |
<div class= "title" > 第四列的第三个div</div> |
<div class= "content" > </div> |
</div> |
<div class= "move" id= "m_4_4" > |
<div class= "title" > 第四列的第四个div</div> |
<div class= "content" > </div> |
</div> |
联系客服