小结js屏幕、浏览器、页面大小（三）———拖拽
（据说今天提前一个小时下班，哦耶。。。马上过年了，先给大家拜个年，祝大家新年快乐，龙年大吉。。。）
本文地址：http://www.cnblogs.com/vnii/archive/2012/01/18/2325528.html
续上一篇，在之前的再次扩展了几个方法，本次扩展的主要是：事件的注册-addEvent、事件注销-delEvent、鼠标事件位置坐标-getPos、dom对象拖拽-drag、创建-$div；
事件注册、注销调用方式：
//注册
var fn = webPage.addEvent(myDiv, "click", function (evt) {
alert("忧郁的匹格");
});
//注销
webPage.delEvent(myDiv，"click", fn);
或：
function fn(){
alert("忧郁的匹格");
}
//注册
webPage.addEvent(myDiv, "click", fn);
//释放
webPage.delEvent(myDiv，"click", fn);
其中推拽调用方式为：
//创建一个div对象
var myDiv=webPage.$div({"id":"id","opacity":"0.5","width":200,"height":200,"color":"#fff000","x":200,"y":200,"z":99999,"styleText":""})
//使得myDiv可拖拽
webPage.drag(myDiv);
几种方法的说明已经注释在源代码中，源代码如下：
//网页大小，宽度和高度，中心点,当前屏幕左上角右下角相对位置，事件注册和注销，鼠标事件位置，dom对象拖拽
var webPage = (function () {
var b = document.body;
var e = document.documentElement;
return {
//当前网页的总大小
size: function () {
//结合上一篇博文中scrollXxx等几种属性的描述
var w = Math.max(b.scrollWidth, b.offsetWidth, e.scrollWidth);
var h = Math.max(b.scrollHeight, b.offsetHeight, e.scrollHeight);
return { "width": w * 1, "height": h * 1 };
},
//当前视窗的屏幕中心位置
center: function (pos) {//pos偏移{left:value,top:value}
//当前视窗中心点位置相对网页左上角的像素位置＝当前视窗大小/2 + 滚动条偏移值
var lt = this.leftTop();
var x = e.clientWidth / 2 + lt.x;
var y = e.clientHeight / 2 + lt.y;
if (pos) {
if (pos.left * 1) {
x = x + pos.left * 1;
}
if (pos.top * 1) {
y = y + pos.top * 1;
}
}
return { "x": x, "y": y };
},
//当前视窗左上角相对当前网页左上角的像素位置＝＝滚动条偏移量
leftTop: function () {
//e.scrollLeft：IE下为偏移值，其它为0 ，b.scrollLeft:IE为0,Chrome等为偏移值
return { "x": (b.scrollLeft + e.scrollLeft) * 1, "y": (b.scrollTop + e.scrollTop) * 1 };
},
//当前视窗右下角相对当前网页左上角的像素位置＝＝当前视窗大小+滚动条偏移量
rightBottom: function () {
var lt = this.leftTop();
return { "x": e.clientWidth + lt.x, "y": e.clientHeight + lt.y };
},
//鼠标事件触发时，相对于网页左上角的像素位置
getPos: function (evt) {
evt = evt || window.event;
if (evt.clientX) {
var lt = this.leftTop();
return { "x": evt.clientX + lt.x, "y": evt.clientY + lt.y };
}
else if (evt.pageX) {
return { "x": evt.pageX, "y": evt.pageY };
}
else {
return null;
}
},
//通用元素绑定事件，并返回回调函数，返回的函数可用于delEvent进行清除该绑定事件
//参考了汤姆大叔的博文
//每一个网页仅判断一次，减少了调用addEvent执行时判断是用attachEvent还是addEventListener，因为第一次执行后就将addEvent重写
addEvent: (function () {
var fn;
if (e.attachEvent) {
fn = function addEvent(element, eventName, callback) {
element.attachEvent('on' + eventName, callback);
return callback;
}
}
else if (e.addEventListener) {
fn = function addEvent(element, eventName, callback) {
element.addEventListener(eventName, callback, false);
return callback;
}
}
else {
fn = function addEvent(element, eventName, callback) {
element['on' + eventName] = callback;
return callback;
}
}
var addEvent = null;
return fn;
} ()),
//清除绑定事件
delEvent: (function () {
var fn;
if (e.detachEvent) {
fn = function delEvent(element, eventName, callback) {
element.detachEvent('on' + eventName, callback);
}
}
else if (e.removeEventListener) {
fn = function delEvent(element, eventName, callback) {
element.removeEventListener(eventName, callback, false);
}
}
else {
fn = function delEvent(element, eventName) {
element['on' + eventName] = null;
}
}
var delEvent = null;
return fn;
} ()),
//设置对象可拖拽：传递一个dom对象dragObj，使dragObj可在网页中拖拽
drag: function (dragObj) {
//设置鼠标样式
dragObj.style.cursor = "pointer";
//防止被拖拽对象内文本被选中
webPage.addEvent(dragObj, "focus", function (evt) {
dragObj.blur();
});
webPage.addEvent(dragObj, "selectstart", function (evt) {
return false;
});
//注册按下事件
webPage.addEvent(dragObj, "mousedown", function (evt) {
evt = evt || window.event
//计算鼠标按下时，被拖拽对象左上角位置和鼠标位置的偏移量
var top = parseInt(dragObj.style.top) || 0;
var left = parseInt(dragObj.style.left) || 0;
var x = evt.clientX + webPage.leftTop().x;
var y = evt.clientY + webPage.leftTop().y;
var posX = x - left;
var posY = y - top;
//创建一个覆盖整个网页的蒙版
//作用：因为鼠标移动较快，移出被拖拽的对象时，在此蒙版中可以再次捕捉到，该蒙版也可以用document代替，但是因为document的全局使用性，如果使用document作为蒙版，可能影响或者被影响到
var q1 = webPage.size();
var mb = webPage.$div({ "width": q1.width, "height": q1.height, "color": "#ffffff", "x": 0, "y": 0, "z": 999 });
dragObj.style.zIndex = 99999;
//蒙版上，注册移动事件
var mbMv = webPage.addEvent(mb, "mousemove", function (evt) {
evt = evt || window.event;
dragObj.style.zIndex = 99999;
var pos = webPage.getPos();
dragObj.style.top = pos.y - posY + "px"; //evt.clientY-posY+webPage.leftTop().y +"px";
dragObj.style.left = pos.x - posX + "px"; //evt.clientX-posX+webPage.leftTop().x +"px";
});
//被拖拽对象上，注册移动事件
var cD = webPage.addEvent(dragObj, "mousemove", function (evt) {
evt = evt || window.event;
dragObj.style.zIndex = 99999;
var pos = webPage.getPos();
dragObj.style.top = pos.y - posY + "px"; //evt.clientY-posY+webPage.leftTop().y +"px";
dragObj.style.left = pos.x - posX + "px"; //evt.clientX-posX+webPage.leftTop().x +"px";
});
//蒙版上，注册鼠标放开事件
webPage.addEvent(mb, "mouseup", function (evt) {
//注销鼠标移动
webPage.delEvent(mb, "mousemove", mbMv);
webPage.delEvent(dragObj, "mousemove", cD);
//清除蒙版
mb.parentNode.removeChild(mb);
});
//被拖拽对象上，注册鼠标放开事件
var dragUp=webPage.addEvent(dragObj, "mouseup", function (evt) {
//注销鼠标移动
webPage.delEvent(mb, "mousemove", mbMv);
webPage.delEvent(dragObj, "mousemove", cD);
//清除蒙版
mb.parentNode.removeChild(mb);
webPage.delEvent(dragObj, "mouseup", dragUp);
});
});
},
//创建一个Div
$div: function (s, p) {
var d = document.createElement("div");
var op = "";
if (s.opacity * 1) {
if (s.opacity * 1 > 1) {
s.opacity = s.opacity / 100;
}
op = ";filter:alpha(Opacity=" + (s.opacity * 100) + ");-moz-opacity:" + s.opacity + ";opacity:" + s.opacity + ";"
d.setAttribute("style", s.styleText + op);
}
if (s.styleText) {
d.setAttribute("style", s.styleText + op);
}
else {
d.setAttribute("style", op);
}
if (s.id) {
d.id = s.id;
}
d.style.backgroundColor = s.color;
d.style.left = s.x + "px";
d.style.top = s.y + "px";
d.style.width = s.width + "px";
d.style.height = s.height + "px";
if (p) {
p.appendChild(d);
}
else {
document.body.appendChild(d);
}
return d;
}
}
} ());
END......
