小結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:?

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

轉載于:https://www.cnblogs.com/beiguren/archive/2012/01/18/2325744.html

總結

以上是生活随笔為你收集整理的[转] 小结js屏幕、浏览器、页面大小（三）———拖拽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。