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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
js实现简单选项卡制作
Aug 05 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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
php 静态化实现代码
2009/03/20 PHP
php中error与exception的区别及应用
2014/07/28 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
客户端静态页面玩分页
2006/06/26 Javascript
对联广告js flash激活
2006/10/19 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
js实现密码强度检验
2017/01/15 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
详解使用vuex进行菜单管理
2017/12/21 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
用Node写一条配置环境的指令
2019/11/14 Javascript
js实现蒙版效果
2020/01/11 Javascript
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
请介绍一下Ant
2016/07/22 面试题
优秀实习自我鉴定
2013/12/04 职场文书
个人求职信范文分享
2014/01/06 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
消防安全员岗位职责
2014/03/10 职场文书
年度考核自我鉴定
2014/03/19 职场文书
保护环境建议书100字
2014/05/13 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
通知的写法
2015/04/23 职场文书
返乡农民工证明
2015/06/24 职场文书
2016公司年会主持词
2015/07/01 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android