小结js屏幕、浏览器、页面大小（三）———拖拽

（据说今天提前一个小时下班，哦耶。。。马上过年了，先给大家拜个年，祝大家新年快乐，龙年大吉。。。）

续上一篇，在之前的再次扩展了几个方法，本次扩展的主要是：事件的注册-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.οnmοusedοwn=function(evt){

evt=evt||window.event

var top=parseInt(this.style.top);

var left=parseInt(this.style.left);

var x=evt.clientX+webPage.leftTop().x;

var y=evt.clientY+webPage.leftTop().y;

var posX=x-left;

var posY=y-top;

(function(obj){

document.οnmοusemοve=function(evt){

evt=evt||window.event;

obj.style.top=evt.clientY-posY+webPage.leftTop().y +"px";

obj.style.left=evt.clientX-posX+webPage.leftTop().x +"px";

}

document.οnmοuseup=function(evt){

}

}(dragObj));

this.οnmοuseup=function(){

this.οnmοusemοve=function(){

}

document.οnmοusemοve=function(evt){

}

}

};*/

//设置鼠标样式

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 = createDiv({ "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);

});

//被拖拽对象上，注册鼠标放开事件

webPage.addEvent(dragObj, "mouseup", function (evt) {

//注销鼠标移动

webPage.delEvent(mb, "mousemove", mbMv);

webPage.delEvent(dragObj, "mousemove", cD);

//清除蒙版

mb.parentNode.removeChild(mb);

});

});

},

//创建一个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;

}

}

} ());

Trackback:

/vnii/archive//01/18/2325528.html

如果觉得《[转] 小结js屏幕 浏览器 页面大小（三）———拖拽》对你有帮助，请点赞、收藏，并留下你的观点哦！