js拖拽功能实现代码解析

2019-11-19 18:47:18

字体：大中小

来源：转载

供稿：网友

本文解决的问题：

1、怎样在网页中实现拖曳功能；

2、document.documentElement与document.body的区别。
document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。

3、getBoundingClientRect().left与offsetLeft的区别。
getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。

4、e.clientX指的是鼠标点相对于窗口的坐标。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹窗</title> <style type="text/css">  #mask {   position: fixed;   left:0;   top:0;   width:100%;   height: 100%;   background-color: hsla(250,100%,50%,0.6);   display: none;  }  #popBox {   position: absolute;   background-color: #fff;   width:200px;   height: 200px;   /*left:50%;   top:50%;*/   /*margin-top: -100px;   margin-left: -100px;*/  } </style></head><body> <button id="clickBtn">点击</button> <div id="mask">  <div id="popBox"></div> </div> <script type="text/javascript">  var clickBtn = document.getElementById("clickBtn");  var popBox = document.getElementById("popBox")  var mask = document.getElementById("mask");  clickBtn.onclick = function() {   mask.style.display = "block";   popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";   popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";  }  popBox.onclick = function(e) {   var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。   e.cancelBubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。  }  mask.onclick = function() {   mask.style.display = "none";  }  //拖拽 mousedown->mousemove->mouseup   popBox.onmousedown = function(e) {   var e = e || window.event;   var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。   var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。   var oY = e.clientY - pos.top;   document.onmousemove = function(e) {    var e = e || window.event;    var oLeft = e.clientX - oX;    var oTop = e.clientY - oY;    popBox.style.left = oLeft + "px";    popBox.style.top = oTop + "px";    if (oLeft<0) {     popBox.style.left = 0 + "px";    };    if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {     popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。    }    if (oTop<0) {     popBox.style.top = 0 + "px";    };    if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {     popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";    }   }   popBox.onmouseup = function() {    document.onmousemove = null;   }  } </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用Vue.js创建一个时间跟踪的单页应用

下一篇：百度搜索框智能提示案例jsonp