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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
js模拟类继承小例子
Jul 17 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
javascript截取字符串小结
Apr 28 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
DWR Ext 加载数据
2009/03/22 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Vuex的初探与实战小结
2018/11/26 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python插入排序算法的实现代码
2013/11/21 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
销售职业生涯规划范文
2014/03/14 职场文书
大学专科求职信
2014/07/02 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2015元旦感言
2015/12/09 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang