仿3721首页模块拖曳移动效
时间：2008-09-22
来源：互联网
<!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;
try {
returnValue = lambda();
break;
} catch (exp) {}
}
return returnValue;
}
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a = b;
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.id == id)
return json;
}
}
};
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.resp****eText);
},
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.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.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.id] = { id : init_json.id, row : null, title : init_json.title };
for (i = 0 ; i < cols.length ; i ++) //便利修改生成的串的属性
for (r = cols.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.row ? 'checked=\"checked\"' : \"\",
' value=\"', json.id, '\" /> ', json.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.type != \"checkbox\") continue;
row = json[items.value];
if ((!!row.row) != items.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.****electstart = 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;
//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.****electstart = 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.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.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.cols), cols = table.add(div);
for (j = 0 ; j < o.rows.length ; j ++)
wc.add(cols.add(o.rows[j].id, o.rows[j].window, o.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>
<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;
try {
returnValue = lambda();
break;
} catch (exp) {}
}
return returnValue;
}
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a = b;
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.id == id)
return json;
}
}
};
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.resp****eText);
},
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.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.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.id] = { id : init_json.id, row : null, title : init_json.title };
for (i = 0 ; i < cols.length ; i ++) //便利修改生成的串的属性
for (r = cols.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.row ? 'checked=\"checked\"' : \"\",
' value=\"', json.id, '\" /> ', json.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.type != \"checkbox\") continue;
row = json[items.value];
if ((!!row.row) != items.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.****electstart = 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;
//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.****electstart = 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.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.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.cols), cols = table.add(div);
for (j = 0 ; j < o.rows.length ; j ++)
wc.add(cols.add(o.rows[j].id, o.rows[j].window, o.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>
作者: 淡水 发布时间: 2008-09-22
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
