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

小结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.onmousedown=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.onmousemove=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.onmouseup=function(evt){
}
}(dragObj));

this.onmouseup=function(){
this.onmousemove=function(){
}
document.onmousemove=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: 

http://www.cnblogs.com/vnii/archive/2012/01/18/2325528.html

你可能感兴趣的:(浏览器)