打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
原生js实现div拖放效果 实现用户自定义布局
userphoto 关注


<!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>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。
打开APP，阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
矩阵类的模板实现（C++）
放大输入框及缩小输入框
二级动态导航菜单特效
网页制作中常用的几个简单的选项卡特效代码(很实用)
JavaScript图片说明的显示和隐藏动画
超平滑滚动的jQuery标签分栏切换效果
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权！
如果VIP功能使用有故障，
可点击这里联系客服！

联系客服