JavaScript offset實現滑鼠座標獲取和視窗內模組拖動
阿新 • • 發佈：2021-05-31
offset
offset 即偏移量，使用 offset 系列相關屬性可以 動態的 獲取該元素的位置（偏移）、大小等，如：
元素距離帶有定位父元素的位置
獲取元素自身的大小（寬度高度）
注：返回的數值不帶單位
offset 系列常用的屬性包括：
element.offsetParent
返回作為該元素帶有定位的父級元素，如果父級元素沒有定位，則返回 body
注意，parentNode 和 offsetParent 還是有本質上的區別的：parentNode 返回的是直接父級元素，offsetParent 返回的是帶有定位的父級元素。
element.offsetTop
返回元素帶有定位父元素上方的偏移
返回元素帶有定位父元素左邊框的偏移
element.offsetWidth
返回自身包括 padding,邊框,內容區的寬度，返回數值不帶單位
element.offsetHeight
返回自身包括 padding,內容區的高度，返回數值不帶單位
offset 和 style 的區別
| offset | style |
|---|---|
| offset 可以得到任意樣式表中的樣式值 | style 只能得到行內樣式表中的樣式值，無法獲得內嵌樣式 |
| offset 系列獲得的數值是沒有單位的 | www.cppcns.comstyle.width 獲得的是帶有單位的字串 |
| offsetWidth 包含 padding+border+width | style.width 獲得不包含 padding 和 border 的值 |
| offsetWidth 等屬性是隻讀屬性，只能獲取不能賦值 | style 屬性是可讀寫屬性，style.width |
| 只想要獲取元素大小位置的時候，用 offset 更合適 | 要對元素樣式進行修改的話，使用 style 更合適 |
案例一：實時展示滑鼠的座標
演示
<!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-scahttp://www.cppcns.comle=1.0" />
<title>滑鼠位置獲取-01</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #55aaff;
margin-left: 50px;
}
</style&g程式設計客棧t;
</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>
案例二：拖動模組
演示
<!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.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滑鼠座標獲取和視窗內模組拖動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！