小结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屏幕、浏览器、页面大小（三）———拖拽相关推荐

nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
js实现页面元素的拖拽
平时在我们页面上,经常会悬浮着一些功能按钮,如帮助,联系客服等,按钮的显示比较简单,用定位悬浮在自己需要的位置上就行,比如下面的页面上我们展示一个帮助的按钮,用户点击后可以展示一些帮助的信息: 代码: ...
js和layerjs配合实现的拖拽表格列
前几天想着实现表格列的拖拽写了个例子一直不完美经过修改感觉还算完美了拖拽过程不会复制文字并且还能实现layerjs本身自带的表格排序功能. 1.首先引入layer.css jquery ...
js：为窗口盒子添加拖拽事件
一,在网页中添加一个独立的显示窗口,为窗口添加onmousedown和onmouseup事件来使窗口可以通过鼠标的拖拽移动. <!DOCTYPE html> <html> &l ...
js实现表格列的位置拖拽
转载请注明出处:http://blog.csdn.net/sllailcp/article 公司突然出了新需求,拖拽表格的列到指定的列,去网上找了下,没有合适产品需求的,就自己写了个小功能. 具体功能 ...

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

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

[转] 小结js屏幕、浏览器、页面大小（三）———拖拽相关推荐

最新文章

热门文章