js拖拽功能实现代码解析


Posted in Javascript onNovember 28, 2016

本文解决的问题:

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

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

3、getBoundingClientRect().leftoffsetLeft的区别。
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
百度搜索框智能提示案例jsonp
Nov 28 #Javascript
JS函数多个参数默认值指定方法分析
Nov 28 #Javascript
ajax级联菜单实现方法实例分析
Nov 28 #Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
简单实现JavaScript图片切换效果
Nov 28 #Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
You might like
单位速度在实战中的运用
2020/03/04 星际争霸
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php Session无效分析资料整理
2016/11/29 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python 复平面绘图实例
2019/11/21 Python
Python selenium的基本使用方法分析
2019/12/21 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
村干部承诺书
2014/03/28 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL