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

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理</title> <style type="text/css"> html, body { width:100%; height:100%; padding:0px; margin:0px; } 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> <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）; }; var Try = { //检测异常 these : function （） { var returnValue, arg = arguments, lambda, i;for （i = 0 ; i < arg.length ; i ++） { lambda = arg[i]; try { returnValue = lambda（）; break; } catch （exp） {} }return returnValue; }}; 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）; } elsewc.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需刷新才能执行]