JavaScript offset实现鼠标坐标获取和窗口内模块拖动


Posted in Javascript onMay 30, 2021

offset

offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移)、大小等,如:
元素距离带有定位父元素的位置
获取元素自身的大小(宽度高度)
注:返回的数值不带单位

offset 系列常用的属性包括:
    element.offsetParent
    返回作为该元素带有定位的父级元素,如果父级元素没有定位,则返回 body
    注意,parentNode 和 offsetParent 还是有本质上的区别的:parentNode 返回的是直接父级元素,offsetParent 返回的是带有定位的父级元素。
    element.offsetTop
    返回元素带有定位父元素上方的偏移
    element.offsetLeft
    返回元素带有定位父元素左边框的偏移
    element.offsetWidth
    返回自身包括 padding, 边框, 内容区的宽度,返回数值不带单位
    element.offsetHeight
    返回自身包括 padding, 边框, 内容区的高度,返回数值不带单位

offset 和 style 的区别

 

offset style
offset 可以得到任意样式表中的样式值 style 只能得到行内样式表中的样式值,无法获得内嵌样式
offset 系列获得的数值是没有单位的 style.width 获得的是带有单位的字符串
offsetWidth 包含 padding+border+width style.width 获得不包含 padding 和 border 的值
offsetWidth 等属性是只读属性,只能获取不能赋值 style 属性是可读写属性,style.width 可以获取也可以赋值
只想要获取元素大小位置的时候,用 offset 更合适 要对元素样式进行修改的话,使用 style 更合适

案例一:实时展示鼠标的坐标

演示

JavaScript offset实现鼠标坐标获取和窗口内模块拖动

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>鼠标位置获取-01</title>
		<style>
			.box {
				width: 500px;
				height: 500px;
				background-color: #55aaff;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<p>获取鼠标在盒子内坐标</p>
		<div class="box"></div>
		<script>
			// 在盒子中点击,想要获得鼠标距离盒子左右的距离
			// 实现:
			// 1. 获得鼠标在页面中的坐标,e.pageX, e.pageY
			// 2. 获得盒子到页面中的距离, box.offsetLeft, box.offsetTop
			// 3. 两者相减就能够获得鼠标在盒子中的坐标
			// 下面看实现过程吧!
			const box = document.querySelector(".box");
			box.addEventListener("mousemove", function(e) {
				// console.log(e.pageX, e.pageY);
				// console.log(box.offsetLeft, box.offsetTop);
				const x = e.pageX - this.offsetLeft;
				const y = e.pageY - this.offsetTop;
				box.textContent = `x: ${x}, y: ${y}`;
			});
		</script>
	</body>
</html>

案例二:拖动模块

演示

JavaScript offset实现鼠标坐标获取和窗口内模块拖动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块拖动-02</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .login,
      .modal {
        display: none;
      }
      .login {
        width: 512px;
        height: 280px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background-color: #fff;
        box-shadow: 0 0 20px #ddd;
        z-index: 999;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 998;
      }
      .login-content {
        margin: 100px auto;
        text-align: center;
      }
      .login-content h3:hover,
      .closeBtn:hover {
        cursor: pointer;
      }
      .closeBtn {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      .login h4 {
        margin-top: 10px;
      }
      .login h4:hover {
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="login-content">
      <h3 id="openLogin">点击弹出模拟框</h3>
    </div>
    <div class="login">
      <div class="closeBtn" id="closeBtn">关闭</div>
      <h4 class="loginHeader">点击我拖动吧</h4>
    </div>
    <div class="modal"></div>
    <script>
      // 获取元素
      const login = document.querySelector(".login");
      const modal = document.querySelector(".modal");
      const closeBtn = document.querySelector("#closeBtn");
      const openLogin = document.querySelector("#openLogin");
      // 点击显示元素
      openLogin.addEventListener("click", () => {
        modal.style.display = "block";
        login.style.display = "block";
      });
      closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
        login.style.display = "none";
      });
      // 实现拖拽移动功能
      // 1. 鼠标按下获得鼠标在盒子内的坐标
      const loginHeader = document.querySelector(".loginHeader");
      loginHeader.addEventListener("mousedown", function (e) {
        const x = e.pageX - login.offsetLeft;
        const y = e.pageY - login.offsetTop;
        const move = function (e) {
          login.style.left = `${e.pageX - x}px`;
          login.style.top = `${e.pageY - y}px`;
        };
        // 2. 移动鼠标
        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", function () {
          document.removeEventListener("mousemove", move);
        });
      });
    </script>
  </body>
</html>

到此这篇关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动的文章就介绍到这了,更多相关JavaScript鼠标坐标获取和窗口内模块拖动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JS字符串处理实例代码
Aug 05 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jquery提示效果实例分析
Nov 25 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
js实现模拟购物商城案例
May 18 Javascript
React Native项目框架搭建的一些心得体会
May 28 #Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 #Javascript
element多个表单校验的实现
May 27 #Javascript
springboot+VUE实现登录注册
May 27 #Vue.js
vue+springboot实现登录验证码
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python dict 相同key 合并value的实例
2019/01/21 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python3获取url文件大小示例代码
2019/09/18 Python
考博专家推荐信模板
2013/12/02 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
五年级数学教学反思
2014/02/11 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
村官个人总结范文
2015/03/03 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL