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 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js动态为代码着色显示行号
May 29 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
VSCode搭建React Native环境
May 07 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
百度搜索框智能提示案例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
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
党校学习思想汇报
2014/01/06 职场文书
会计专业自我评价
2014/02/12 职场文书
艺术节主持词
2014/04/02 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL