小结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