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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
JS监听组合按键思路及实现过程
Apr 17 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JS 继承实例分析
2008/11/04 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JSON格式化输出
2014/11/10 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
js实现全选和全不选
2020/07/28 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
9种python web 程序的部署方式小结
2014/06/30 Python
python实现扫描日志关键字的示例
2018/04/28 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python实现横向拼接图片
2020/03/23 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
简短证婚人证婚词
2014/01/09 职场文书
三年级语文教学反思
2014/02/01 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
骨干教师考核评语
2014/12/31 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年中秋寄语
2015/07/31 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers