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中的isXX系列
Aug 01 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 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
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中属性和描述符的正确使用
2016/08/23 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
基于FME使用Python过程图解
2020/05/13 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
物业管理应届生求职信
2013/10/28 职场文书
2014新年寄语
2014/01/20 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
初婚未育证明样本
2014/10/24 职场文书
2015年大学生工作总结
2015/04/21 职场文书
婚庆答谢词大全
2015/09/29 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书