小結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......