点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

来源：动视网责编：小采时间：2020-11-27 20:40:01

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景: 仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cel

推荐度：

点击下载本文 文档为doc格式

导读仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景: 仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cel

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理</title>

body { 
 text-align:center; 
 font-size:14px; 
}

.cell_left, .cell_right { 
 width:202px; 
}

.cell_center { 
 width:404px; 
}

.left { 
 float:left; 
}

.row { 
 clear:both; 
}

.r_nbsp { 
 width:20px; 
}

.root { 
 width:876px; 
 height:auto; 
 margin:auto; 
}

.root * { 
/*此属性FF的说*/ 
 -moz-user-select:none; 
}

.line { 
 width:100%px; 
 height:0px; 
 overflow:hidden; 
}

.move { 
 border:#CCCCCC 1px solid; 
 width:100%; 
 height:aotu; 
 margin-top:5px; 
 margin-bottom:5px; 
 display:none; 
}

.title { 
 height:24px; 
 line-height:24px; 
 background:#0080C0; 
}

.title_a { 
 width:auto; 
 margin-right:80px; 
 cursor:move; 
 font-size:12px; 
 font-weight:bold; 
 color:#FFFFFF; 
 text-align:left; 
 padding-left:10px; 
}

.title_reduce, .title_lock, .title_edit, .title_close { 
 float:right; 
 width:20px; 
 font-size:9px; 
 color:#CCCCCC; 
}

.title_reduce, .title_lock, .title_edit { 
 cursor:pointer; 
}

.title_close { 
 cursor:default; 
}

.content { 
 height:100px; 
 border-top:#CCCCCC 1px solid; 
 background-color:#F7F7F7; 
 font-size:12px; 
 line-height:130%; 
}

.CDrag_temp_div { 
 border:#CCCCCC 1px dashed; 
 margin-top:5px; 
 margin-bottom:5px; 
}

a#DEL_CDrag, a#ADD_CDrag { 
 color:#6699CC; 
 text-decoration:none; 
}

a#DEL_CDrag:hover, a#ADD_CDrag:hover { 
 color:#FF0000; 
}

.Dall_screen, .Iall_screen { 
 position:absolute; 
 left:0px; 
 top:0px; 
}

.Dall_screen { 
 z-index:99; 
 background-color:#000000; 
 filter:alpha(opacity=30); 
 opacity:0.3; 
}

.Iall_screen { 
 z-index:98; 
 filter:alpha(opacity=0); 
 opacity:0; 
}

.Nall_screen { 
 position:absolute; 
 z-index:100; 
 left:300px; 
 top:100px; 
 width:300px; 
 height:auto; 
 border:#6699CC 1px solid; 
 background-color:#F0FAFF; 
 padding:10px 0 10px 0; 
}

.Call_screen { 
 width:100%; 
 height:auto; 
 line-height:30px; 
 font-size:12px; 
 padding-bottom:10px; 
} 
</style>

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 CDrag = Class.create();

CDrag.IE = /MSIE/.test(window.navigator.userAgent);

CDrag.load = function (obj_string, func, time) { 
//加载对象 
 var index = 0, timer = window.setInterval(function () { 
 try { 
 if (eval(obj_string + ".loaded")) { 
 window.clearInterval(timer); 
 func(eval("new " + obj_string)); 
 } 
 } catch (exp) {}

if (++ index == 20) window.clearInterval(timer); 
 }, time + index * 3); 
};

CDrag.database = { 
//数据存储 
 json : null, 
 
 parse : function (id) { 
 //查找资源 
 var wc = this, json = wc.json, i; 
 for (i in json) { 
 if (json[i].id == id) 
 return json[i]; 
 } 
 } 
};

CDrag.Ajax = Class.create();

Object.extend(CDrag.Ajax, {

getTransport: function() { 
 return Try.these( 
 function () { return new ActiveXObject('Msxml2.XMLHTTP') }, 
 function () { return new ActiveXObject('Microsoft.XMLHTTP') }, 
 function () { return new XMLHttpRequest() } 
 ) || false; 
 } 
 
});

CDrag.Ajax.prototype = {

initialize : function (url) { 
 //初始化 
 var wc = this; 
 wc.ajax = CDrag.Ajax.getTransport(); 
 }, 
 
 load : function (func) { 
 var wc = this, ajax = wc.ajax; 
 if (ajax.readyState == 4 && ajax.status == 200) 
 func(ajax.responseText); 
 }, 
 
 send : function (url, func) { 
 var wc = this, ajax = wc.ajax, 
 querys = url + "&" + new Date().getTime() + (10000 + parseInt(Math.random() * 10000)); 
 ajax.open("get", querys, true); 
 ajax.onreadystatechange = wc.load.bind(wc, func); 
 ajax.send(null); 
 } 
 
};

CDrag.Table = Class.create();

CDrag.Table.prototype = { 
//列的拖拽暂时不考虑

initialize : function () { 
 //初始化 
 var wc = this; 
 wc.items = []; //创建列组 
 }, 
 
 add : function () { 
 //添加列 
 var wc = this, id = wc.items.length, arg = arguments; 
 return wc.items[id] = new CDrag.Table.Cols(id, wc, arg[0]); 
 } 
};

CDrag.Table.Cols = Class.create();

CDrag.Table.Cols.prototype = { 
 
 initialize : function (id, parent, element) { 
 //初始化 
 var wc = this; 
 wc.items = []; //创建列组 
 wc.id = id; 
 wc.parent = parent; 
 wc.element = element; 
 }, 
 
 add : function () { 
 //添加行 
 var wc = this, id = wc.items.length, arg = arguments; 
 return wc.items[id] = new CDrag.Table.Rows(id, wc, arg[0], arg[1], arg[2]); 
 }, 
 
 ins : function (num, row) { 
 //插入行 
 var wc = this, items = wc.items, i; 
 
 if (row.parent == wc && row.id < num) num --; //同列向下移动的时候 
 for (i = num ; i < items.length ; i ++) items[i].id ++; 
 
 items.splice(num, 0, row); 
 row.id = num, row.parent = wc; 
 
 return row; 
 }, 
 
 del : function (num) { 
 //删除行 
 var wc = this, items = wc.items, i; 
 
 if (num >= items.length) return; 
 for (i = num + 1; i < items.length ; i ++) items[i].id = i - 1; 
 return items.splice(num, 1)[0]; 
 } 
 
};

CDrag.Table.Rows = Class.create();

CDrag.Table.Rows.prototype = { 
 
 
 initialize : function (id, parent, element, window, locks) { 
 //初始化 
 var wc = this, temp; 
 
 wc.id = id; 
 wc.parent = parent; 
 wc.root_id = element; 
 wc.window = window; 
 wc.element = wc.element_init(); 
 
 temp = wc.element.childNodes[0]; 
 wc.title = temp.childNodes[4]; 
 wc.reduce = temp.childNodes[3]; 
 wc.lock = temp.childNodes[2], wc.locks = locks; 
 wc.edit = temp.childNodes[1]; 
 wc.close = temp.childNodes[0]; 
 wc.content = wc.element.childNodes[1]; 
 
 wc.Class = wc.mousedown = wc.reduceFunc = wc.lockFunc = wc.editFunc = wc.closeFunc = null; 
 
 wc.init(); 
 wc.load(); 
 }, 
 
 element_init : function () { 
 //初始化元素 
 var wc = this, div = $("root_row").cloneNode(true); 
 
 wc.parent.element.appendChild(div); 
 div.style.display = "block"; 
 return div; 
 }, 
 
 init : function () { 
 //初始化信息 
 var wc = this; 
 if (wc.window == 0) { 
 wc.content.style.display = "none"; 
 wc.reduce.innerHTML = "放大"; 
 } else { 
 wc.content.style.display = "block"; 
 wc.reduce.innerHTML = "缩小"; 
 } 
 
 wc.lock.innerHTML = !wc.locks ? "锁定" : "解除"; 
 }, 
 
 load : function () { 
 //获取相关信息 
 var wc = this, info = CDrag.database.parse(wc.root_id), script; 
 
 wc.title.innerHTML = info.title; 
 
 if (info.src) { 
 wc.content.innerHTML = "loading"; 
 script = document.createElement("script"); 
 script.src = info.src + ".js"//, script.defer = true; 
 document.getElementsByTagName("head")[0].appendChild(script); 
 CDrag.load(info.className, wc.upload.bind(wc), 5); 
 } else wc.content.innerHTML = info.className; 
 }, 
 
 upload : function (obj) { 
 /*加载类信息 
 注：这里给行加入了一个扩展类，这里行的内容可以通过扩展类来控制^o^ 
 不过扩展类的格式必须有open方法和edit方法，还有类名.静态成员loaded = true；为了检测是否加载完毕 
 扩展类需放到单独的.js文件里，然后从database结构体内设定其参数即可 
 */ 
 var wc = this; 
 wc.Class = obj; 
 wc.Class.parent = wc; 
 wc.editFunc = Object.addEvent(wc.edit, ["onclick"], wc.lockF(wc.Class, wc.Class.edit, wc)); 
 wc.Class.open(); 
 }, 
 
 lockF : function () { 
 //检索锁定 
 var wc = this, arg = $A(arguments), root = arg.shift(), func = arg.shift(); 
 return function () { 
 if (!wc.locks) func.apply(root, arg.concat($A(arguments))); 
 }; 
 } 
 
};

CDrag.Add = Class.create();

CDrag.Add.prototype = { 
 
 initialize : function (parent) { 
 //初始化参数 
 var wc = this; 
 wc.div = document.createElement("div"); //最外层div 
 wc.iframe = document.createElement("iframe"); //协助wc.div盖select的iframe 
 wc.node = document.createElement("div"); //内容底层div 
 wc.content = document.createElement("div"); //内容层div 
 wc.button = document.createElement("button"); //内容处理按钮 
 wc.parent = parent; 
 wc.json = null; 
 
 wc.button.onclick = wc.execute.bind(wc, wc.content); //向按钮指向方法 
 wc.init_element(); 
 }, 
 
 init_element : function () { 
 //初始化元素 
 var wc = this; 
 wc.div.setAttribute(CDrag.IE ? "className" : "class", "Dall_screen"); 
 wc.iframe.setAttribute(CDrag.IE ? "className" : "class", "Iall_screen"); 
 wc.node.setAttribute(CDrag.IE ? "className" : "class", "Nall_screen"); 
 wc.content.setAttribute(CDrag.IE ? "className" : "class", "Call_screen"); 
 wc.button.innerHTML = "执行"; 
 wc.node.appendChild(wc.content); 
 wc.node.appendChild(wc.button); 
 }, 
 
 init_json : function () { 
 //初始化原始数据信息串 
 var wc = this, parent = wc.parent, 
 cols = parent.table.items, new_json = {}, init_json = CDrag.database.json, r, i, j; 
 
 for (i = 0 ; i < init_json.length ; i ++) //便利原始数据 
 new_json[init_json[i].id] = { id : init_json[i].id, row : null, title : init_json[i].title }; 
 
 for (i = 0 ; i < cols.length ; i ++) //便利修改生成的串的属性 
 for (r = cols[i].items, j = 0 ; j < r.length ; j ++) 
 new_json[r[j].root_id].row = r[j]; 
 return new_json; 
 }, 
 
 init_node : function () { 
 //初始化内容层div的数据 
 var wc = this, json = wc.json = wc.init_json(), boxary = [], i; 
 for (i in json) 
 boxary[boxary.length] = [ 
 '<input type="checkbox"', json[i].row ? 'checked="checked"' : "", 
 ' value="', json[i].id, '" /> ', json[i].title, '<br \/>' 
 ].join("");

wc.content.innerHTML = boxary.join(""); //写入内容层 
 }, 
 
 execute : function (div) { 
 //处理table类结构 
 var wc = this, parent = wc.parent, json = wc.json, items = div.getElementsByTagName("input"), row, c, i; 
 
 try { 
 
 for (i = 0 ; i < items.length ; i ++) { 
 
 if (items[i].type != "checkbox") continue; 
 row = json[items[i].value]; 
 
 if ((!!row.row) != items[i].checked) { 
 if (row.row) parent.remove(row.row); //删除 
 else parent.add(parent.table.items[0].add(row.id, 1, false)); //向第一行追加数据 
 c = true; 
 } 
 
 } 
 
 div.innerHTML = ""; 
 if (c) parent.set_cookie(); 
 
 } catch (exp) {} 
 wc.close(); 
 }, 
 
 add : function () { 
 //添加数据 
 var wc = this, div = wc.div, iframe = wc.iframe; 
 wc.init_node(); 
 div.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.offsetHeight) + "px"; 
 div.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.offsetWidth) + "px"; 
 document.getElementsByTagName("html")[0].style.overflow = "hidden"; 
 document.body.appendChild(iframe); 
 document.body.appendChild(div); 
 document.body.appendChild(wc.node); 
 }, 
 
 close : function () { 
 //关闭添加框 
 var wc = this, div = wc.div, iframe = wc.iframe; 
 document.getElementsByTagName("html")[0].style.overflow = CDrag.IE ? "" : "auto"; 
 document.body.removeChild(iframe); 
 document.body.removeChild(div); 
 document.body.removeChild(wc.node); 
 } 
 
};

CDrag.prototype = { 
 
 initialize : function () { 
 //初始化成员 
 var wc = this; 
 wc.table = new CDrag.Table; //建立表格对象 
 wc.addc = new CDrag.Add(wc); //建立添加对象 
 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 }; 
 }, 
 
 execMove : function (status, on_obj, in_obj, place) { 
 //处理拖拽过程细节 
 var wc = this, obj = wc.obj.on, temp = wc.temp, px; 
 
 obj.a = on_obj, obj.b = status; 
 
 if (place == 0) { 
 //向上 
 px = in_obj.element.clientWidth; 
 in_obj.element.parentNode.insertBefore(temp.div, in_obj.element); 
 } else if (place == 1) { 
 //新加入 
 px = in_obj.element.clientWidth - 2; 
 in_obj.element.appendChild(temp.div); 
 } else { 
 //向下 
 px = in_obj.element.clientWidth; 
 in_obj.element.parentNode.appendChild(temp.div); 
 } 
 
 wc.obj.left = Math.ceil(px / temp.div.offsetWidth * wc.obj.left); //处理拖拽换行后宽度变化，鼠标距离拖拽物的距离的误差. 
 temp.row.style.width = temp.div.style.width = px + "px"; //处理换列后对象宽度变化 
 }, 
 
 sMove : function (o) { 
 //当拖动开始时设置参数 
 
 var wc = this; 
 if (o.locks || wc.iFunc || wc.eFinc) return; 
 
 var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.element, 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)); //复制预拖拽对象 
 temp.row.style.width = div.clientWidth + "px"; 
 
 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.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, mouse = wc.reMouse(), cols = wc.table.items, 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]; 
 //if (t_cols != obj.row.parent) continue; 
 t_position = wc.rePosition(t_cols.element); 
 if (t_position.x < mouse.x && t_position.x + t_cols.element.offsetWidth > mouse.x) { 
 if (t_cols.items.length > 0) { //如果此列行数大于0 
 if (t_cols.items[0] != obj.row && wc.rePosition(t_cols.items[0].element).y + 20 > mouse.y) { 
 //如果第一行不为拖拽对象并且鼠标位置大于第一行的位置即是最上。 
 //向上 
 wc.execMove("up", t_cols.items[0], t_cols.items[0], 0); 
 } else if (t_cols.items.length > 1 && t_cols.items[0] == row && 
 wc.rePosition(t_cols.items[1].element).y + 20 > mouse.y) { 
 //如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。 
 //向上 
 wc.execMove("me", t_cols.items[1], t_cols.items[1], 0); 
 } else { 
 for (j = t_cols.items.length - 1 ; j > -1 ; j --) { 
 //重最下行向上查询 
 t_rows = t_cols.items[j]; 
 if (t_rows == obj.row) { 
 if (t_cols.items.length == 1) { 
 //如果拖拽的是此列最后一行 
 wc.execMove("me", t_cols, t_cols, 1); 
 } 
 continue; 
 } 
 if (wc.rePosition(t_rows.element).y < mouse.y) { 
 //如果鼠标大于这行则在这行下面 
 if (t_rows.id + 1 < t_cols.items.length && t_cols.items[t_rows.id + 1] != obj.row) { 
 //如果这行有下一行则重这行下一行的上面插入 
 wc.execMove("down", t_rows, t_cols.items[t_rows.id + 1], 0); 
 } else if (t_rows.id + 2 < t_cols.items.length) { 
 //如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位 
 wc.execMove("me", null, t_cols.items[t_rows.id + 2], 0); 
 } else { 
 //前面都没有满足则放在最低行 
 wc.execMove("down", t_rows, t_rows, 2); 
 } 
 return; 
 } 
 } 
 } 
 } else { 
 //此列无内容添加新行 
 wc.execMove("new", t_cols, t_cols, 1); 
 } 
 } 
 } 
 }, 
 
 eMove : function () { 
 //当鼠标释放时设置参数 
 var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.element, o_cols, n_cols, number; 
 
 if (obj.on.b != "me") { 
 number = (obj.on.b == "down" ? obj.on.a.id + 1 : 0); 
 n_cols = (obj.on.b != "new" ? obj.on.a.parent : obj.on.a); 
 o_cols = obj.row.parent; 
 n_cols.ins(number, o_cols.del(obj.row.id)); 
 
 wc.set_cookie(); 
 } 
 
 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; 
 }, 
 
 reduce : function (o) { 
 //变大变小 
 var wc = this; 
 if ((o.window = (o.window == 1 ? 0 : 1))) { 
 o.content.style.display = "block"; 
 o.reduce.innerHTML = "缩小"; 
 } else { 
 o.content.style.display = "none"; 
 o.reduce.innerHTML = "放大"; 
 } 
 wc.set_cookie(); 
 }, 
 
 lock : function (o) { 
 //锁定 
 var wc = this; 
 if (o.locks) { 
 o.locks = false; 
 o.lock.innerHTML = "锁定"; 
 } else { 
 o.locks = true; 
 o.lock.innerHTML = "解除"; 
 } 
 wc.set_cookie(); 
 }, 
 
 close : function (o) { 
 //关闭对象 
 var wc = this; 
 wc.remove(o); 
 wc.set_cookie(); 
 }, 
 
 remove : function (o) { 
 //移除对象 
 var wc = this, parent = o.parent; 
 
 Object.delEvent(o.close, ["onclick"], o.closeFunc); 
 if (o.editFunc) Object.delEvent(o.edit, ["onclick"], o.editFunc); 
 Object.delEvent(o.lock, ["onclick"], o.lockFunc); 
 Object.delEvent(o.reduce, ["onclick"], o.reduceFunc); 
 Object.delEvent(o.title, ["onmousedown"], o.mousedown); 
 
 o.mousedown = o.reduceFunc = o.lockFunc = o.editFunc = o.closeFunc = null; 
 
 parent.element.removeChild(o.element); 
 parent.del(o.id); 
 delete wc.Class; 
 delete o; 
 }, 
 
 create_json : function () { 
 //生成json串 
 var wc = this, cols = wc.table.items, a = [], b = [], i, j, r; 
 for (i = 0 ; i < cols.length ; i ++) { 
 for (r = cols[i].items, j = 0 ; j < r.length ; j ++) 
 b[b.length] = "{id:'" + r[j].root_id + "',window:" + r[j].window + ",locks:" + r[j].locks + "}"; 
 a[a.length] = "cols:'" + cols[i].element.id + "',rows:[" + b.splice(0, b.length).join(",") + "]"; 
 } 
 return escape("[{" + a.join("},{") + "}]"); 
 }, 
 
 parse_json : function (cookie) { 
 //解释json成对象 
 return eval("(" + cookie + ")"); 
 }, 
 
 get_cookie : function () { 
 //获取COOKIE 
 return (/CDrag=([^;]+)(?:;|$)/.exec(document.cookie) || [,])[1]; 
 }, 
 
 set_cookie : function () { 
 //设置COOKIE 
 var wc = this, date = new Date; 
 date.setDate(date.getDate() + 1); 
 document.cookie = "CDrag=" + wc.create_json() + ";expires=" + date.toGMTString(); 
 }, 
 
 del_cookie : function () { 
 //删除COOKIE 
 var wc = this, cookie = wc.get_cookie(), date; 
 if (cookie) { 
 date = new Date; 
 date.setTime(date.getTime() - 1); 
 document.cookie = "CDrag=" + cookie + ";expires=" + date.toGMTString(); 
 } 
 }, 
 
 parse : function (o) { 
 //初始化成员 
 try { 
 var wc = this, table = wc.table, cols, rows, div, i, j; 
 for (i = 0 ; i < o.length ; i ++) {

div = $(o[i].cols), cols = table.add(div); 
 for (j = 0 ; j < o[i].rows.length ; j ++) 
 wc.add(cols.add(o[i].rows[j].id, o[i].rows[j].window, o[i].rows[j].locks)); 
 } 
 } catch (exp) { 
 wc.del_cookie(); 
 } 
 }, 
 
 add : function (o) { 
 //添加对象 
 var wc = this; 
 o.mousedown = Object.addEvent(o.title, ["onmousedown"], o.lockF(wc, wc.sMove, o)); 
 o.reduceFunc = Object.addEvent(o.reduce, ["onclick"], o.lockF(wc, wc.reduce, o)); 
 o.lockFunc = Object.addEvent(o.lock, ["onclick"], wc.lock.bind(wc, o)); 
 o.closeFunc = Object.addEvent(o.close, ["onclick"], o.lockF(wc, wc.close, o)); 
 }, 
 
 append : function () { 
 var wc = this; 
 wc.addc.add(); 
 } 
 
};

CDrag.database.json = [ 
 
 { id : "m_1_1", title : "假如说某类新闻", className : "News", src : "News" }, 
 
 { id : "m_1_2", title : "第一列的第二个", className : "第一列的第二个", src : "" }, 
 
 { id : "m_1_3", title : "第一列的第三个", className : "第一列的第三个", src : "" }, 
 
 { id : "m_1_4", title : "第一列的第四个", className : "第一列的第四个", src : "" }, 
 
 { id : "m_2_1", title : "第二列的第一个", className : "第二列的第一个", src : "" }, 
 
 { id : "m_2_2", title : "第二列的第二个", className : "第二列的第二个", src : "" }, 
 
 { id : "m_2_3", title : "第二列的第三个", className : "第二列的第三个", src : "" }, 
 
 { id : "m_2_4", title : "第二列的第四个", className : "第二列的第四个", src : "" }, 
 
 { id : "m_3_1", title : "假如说某类图片", className : "Pic", src : "Pic" }, 
 
 { id : "m_3_2", title : "第三列的第二个", className : "第三列的第二个", src : "" }, 
 
 { id : "m_3_3", title : "第三列的第三个", className : "第三列的第三个", src : "" }, 
 
 { id : "m_3_4", title : "第三列的第四个", className : "第三列的第四个", src : "" } 
 
];

Object.addEvent(window, ["onload"], function () { 
 var wc = new CDrag, cookie = wc.get_cookie(); 
 
 json = cookie ? wc.parse_json(unescape(cookie)) : [ 
 
 { cols : "m_1", rows : [ 
 { id : "m_1_1", window : 1, locks : false }, 
 { id : "m_1_2", window : 1, locks : false }, 
 { id : "m_1_3", window : 1, locks : false } 
 ] }, 
 
 { cols : "m_2", rows : [ 
 { id : "m_2_1", window : 1, locks : false }, 
 { id : "m_2_2", window : 1, locks : false }, 
 { id : "m_2_3", window : 1, locks : false } 
 ] }, 
 
 { cols : "m_3", rows : [ 
 { id : "m_3_1", window : 1, locks : false }, 
 { id : "m_3_2", window : 1, locks : false }, 
 { id : "m_3_3", window : 1, locks : false } 
 ] } 
 
 ]; 
 
 wc.parse(json); 
 
 (function (wc) { 
 
 $("DEL_CDrag").onclick = function () { 
 wc.del_cookie(); 
 window.location.reload(); 
 }; 
 
 $("ADD_CDrag").onclick = function () { 
 wc.append(); 
 }; 
 
 })(wc);

wc = null; 
}); 
</ script> 
</head> 
<body>

[清除记录] 
 
 [添加记录] 
 
关闭编辑锁定缩小　 
 
 
 　 
 
 
 　 
 
 
 　 
 
 
 　 
 
 
 　 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

推荐度：

点击下载本文 文档为doc格式

标签：特效 js 效果

热门焦点

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

最新推荐

猜你喜欢

热门推荐