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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 145 ::

收藏到网摘: n/a

javascript的trim,ltrim,rtrim自定义函数 Javascript拖拽系列文章1之offsetParent属性

比较不错的模仿3721的页面模块拖动效果代码

点击运行可以看到效果:

<!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); } 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>
<div> <a id="DEL_CDrag" href="javascript:void(0);">[清除记录]</a> <a id="ADD_CDrag" href="javascript:void(0);">[添加记录]</a>
</div>
<div class="move" id="root_row"><div class="title"><div class="title_close">关闭</div><div class="title_edit">编辑</div><div class="title_lock">锁定</div><div class="title_reduce">缩小</div><div class="title_a">　</div></div><div class="content"></div></div>
<div class="root"> <div class="cell_left left" id="m_1"> <div class="line">　</div> </div> <div class="left r_nbsp">　</div> <div class="cell_center left" id="m_2"> <div class="line">　</div> </div> <div class="left r_nbsp">　</div> <div class="cell_right left" id="m_3"> <div class="line">　</div> </div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript的trim,ltrim,rtrim自定义函数 Javascript拖拽系列文章1之offsetParent属性

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

评论 (0) All

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