实现页面模块的拖动js文件代码如下：（跪求高手！！！！）需要实现 IE与火狐浏览器的兼容。
由于字数限制，我部分部分的发代码...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) {
alert("出现异常")//--by：huanggz--
}
} 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 movdiv = Class.create();movdiv.IE = /MSIE/.test(window.navigator.userAgent);movdiv.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);
};movdiv.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];
}
}
};movdiv.Ajax = Class.create();Object.extend(movdiv.Ajax, { getTransport: function () {
return Try.these(
function () { return new ActiveXObject('Msxml2.XMLHTTP') },
function () { return new ActiveXObject('Microsoft.XMLHTTP') },
function () { return new XMLHttpRequest() }
) || false;
}});movdiv.Ajax.prototype = { initialize: function (url) {
//初始化
var wc = this;
wc.ajax = movdiv.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);
}};movdiv.Table = Class.create();movdiv.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 movdiv.Table.Cols(id, wc, arg[0]);
}
};movdiv.Table.Cols = Class.create();movdiv.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 movdiv.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];
}};
由于字数限制，我部分部分的发代码...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) {
alert("出现异常")//--by：huanggz--
}
} 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 movdiv = Class.create();movdiv.IE = /MSIE/.test(window.navigator.userAgent);movdiv.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);
};movdiv.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];
}
}
};movdiv.Ajax = Class.create();Object.extend(movdiv.Ajax, { getTransport: function () {
return Try.these(
function () { return new ActiveXObject('Msxml2.XMLHTTP') },
function () { return new ActiveXObject('Microsoft.XMLHTTP') },
function () { return new XMLHttpRequest() }
) || false;
}});movdiv.Ajax.prototype = { initialize: function (url) {
//初始化
var wc = this;
wc.ajax = movdiv.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);
}};movdiv.Table = Class.create();movdiv.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 movdiv.Table.Cols(id, wc, arg[0]);
}
};movdiv.Table.Cols = Class.create();movdiv.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 movdiv.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];
}};
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 = "<img src=images/zhan.gif alt=展>";
} else {
wc.content.style.display = "block";
wc.reduce.innerHTML = "<img src=images/suo.gif alt=缩>";
} wc.lock.innerHTML = wc.locks ? "<img src=images/jie.gif alt=解>" : "<img src=images/lock.gif alt=锁>";
}, load: function () {
//获取相关信息
var wc = this, info = movdiv.database.parse(wc.root_id), script;
var tempTitle = "";
var tempContent = ""; tempTitle = tempTitle.concat("<img src ='");
tempTitle = tempTitle.concat(info.image);
tempTitle = tempTitle.concat("' />");
tempTitle = tempTitle.concat("<a href='#'>");
tempTitle = tempTitle.concat(info.title);
tempTitle = tempTitle.concat("</a>");
tempTitle = tempTitle.concat("<span>  </span>");
tempTitle = tempTitle.concat("<span style='text-align:right;color:#557FFF'>");
tempTitle = tempTitle.concat("[<a href='");
tempTitle = tempTitle.concat(info.srcList);
tempTitle = tempTitle.concat("'>更多</a>]");
tempTitle = tempTitle.concat("</span>");
tempTitle = tempTitle.concat("        <span style='text-align:right;color:#557FFF'>");
tempTitle = tempTitle.concat("[<a href='news/Question.aspx'>我要留言</a>]</span>"); tempContent = tempContent.concat("<iframe name='");
tempContent = tempContent.concat(info.className);
tempContent = tempContent.concat("' src='");
tempContent = tempContent.concat(info.src);
tempContent = tempContent.concat("'");
tempContent = tempContent.concat("marginwidth='0' height=80px width=98% marginheight='0' border='0' frameborder='0' scrolling='no'");
tempContent = tempContent.concat(">");
tempContent = tempContent.concat("</iframe>");
wc.title.innerHTML = tempTitle;
wc.content.innerHTML = tempContent;
}
else if (info.className) {
var tempTitle = "";
var tempContent = ""; tempTitle = tempTitle.concat("<img src ='");
tempTitle = tempTitle.concat(info.image);
tempTitle = tempTitle.concat("' />");
tempTitle = tempTitle.concat("<a href='#'>");
tempTitle = tempTitle.concat(info.title);
tempTitle = tempTitle.concat("</a>");
tempTitle = tempTitle.concat("<span>  </span>");
tempTitle = tempTitle.concat("<span style='text-align:right;color:#557FFF'>");
tempTitle = tempTitle.concat("[<a href='");
tempTitle = tempTitle.concat(info.srcList);
tempTitle = tempTitle.concat("'>更多</a>]");
tempTitle = tempTitle.concat("</span>"); tempContent = tempContent.concat("<iframe name='");
tempContent = tempContent.concat(info.className);
tempContent = tempContent.concat("' src='");
tempContent = tempContent.concat(info.src);
tempContent = tempContent.concat("'");
tempContent = tempContent.concat("marginwidth='0' height='");
tempContent = tempContent.concat(info.height);
tempContent = tempContent.concat("'px width=98% marginheight='0' border='0' frameborder='0' scrolling='no'");
tempContent = tempContent.concat(">");
tempContent = tempContent.concat("</iframe>"); wc.title.innerHTML = tempTitle;
wc.content.innerHTML = tempContent;
}
else {
wc.title.innerHTML = info.title;
wc.content.innerHTML = "当前栏目信息无信息或信息加载失败.";
} }, upload: function (obj) {
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)));
};
}};movdiv.Add = Class.create();movdiv.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(movdiv.IE ? "className" : "class", "Dall_screen");
wc.iframe.setAttribute(movdiv.IE ? "className" : "class", "Iall_screen");
wc.node.setAttribute(movdiv.IE ? "className" : "class", "Nall_screen");
wc.content.setAttribute(movdiv.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 = movdiv.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; var index = 0;
for (i in json) {
if (index % 2 == 0) {
boxary[boxary.length] = [
'<input type="checkbox"', json[i].row ? 'checked="checked"' : "",
' value="', json[i].id, '" /> ', json[i].title
].join("");
}
else {
boxary[boxary.length] = [
'<input type="checkbox"', json[i].row ? 'checked="checked"' : "",
' value="', json[i].id, '" /> ', json[i].title, '<br \/>'
].join("");
}
index++;
} 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 = movdiv.IE ? "" : "auto";
document.body.removeChild(iframe);
document.body.removeChild(div);
document.body.removeChild(wc.node);
}};
//初始化成员
var wc = this;
wc.table = new movdiv.Table; //建立表格对象
wc.addc = new movdiv.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(movdiv.IE ? "className" : "class", "movdiv_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;
},