用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - javascript代码库

原生js实现div拖放效果 实现用户自定义布局

2014-05-15 作者： 小蜜锋举报

[javascript]代码库

<!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>
  </div>
</div>
</body>
</html>

[代码运行效果截图]


原生js实现div拖放效果 实现用户自定义布局


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...