js 拖曳功能--代码解析

这一章解决的问题
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>

js 拖曳功能--代码解析相关推荐

html和js基础功能代码备份
1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3 ...
java keytool 代码_JDK keytool证书工具功能代码解析_java_脚本之家
一.生成证书 keytool -genkey -alias tomcat -keyalg RSA -keystore D:/tomcat.keystore -keypass 123456 -store ...
美狐美颜SDK最常用功能代码解析
当下,平台方接入美颜工具包甚至已经成为刚需,没有美颜SDK甚至都会极大程度影响到用户体验,对于主播则更为重要,这甚至会影响到平台的发展.如今,直播美颜工具在广大直播平台中时时刻刻发挥着重要的作用.那么 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
json在线解析功能代码实现
文章目录 json在线解析功能代码实现 jsp部分 js部分 css部分最终效果 json在线解析功能代码实现当在查看一些原始报文数据时,需要美化展示原始报文json,这时需要使用css进行相应排 ...
Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...

js 拖曳功能--代码解析

js 拖曳功能--代码解析相关推荐

最新文章

热门文章