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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
numpy中矩阵合并的实例
2018/06/15 Python
有关Python的22个编程技巧
2018/08/29 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
如何在django中运行scrapy框架
2020/04/22 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
模具设计与制造专业自荐书
2014/07/01 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技