20190530 div-拖動drag（二）

時間 2019-12-05

標籤 div 拖動 drag 欄目 CSS 简体版

原文原文鏈接

下面列表中羅列的是dom元素和事件中的尺寸,在各類計算位置的方法中均有使用，須要十分熟悉。

------------------- >>>>>分割線<<<<< --------------javascript

elment元素自帶的屬性

尺寸	對應於style的屬性	備註
offsetWidth	width + 2 * borderWidth	寬度+邊框*2
offsetHeight	height + 2 * borderWidth	高度+邊框*2
offsetTop	top	相對於父元素（拖拽中用於獲取當前元素的位置）
offsetLeft	left	相對於父元素（拖拽中用於獲取當前元素的位置）
clientWidth	width	元素內部寬度
clientHeight	height	元素內部高度

getBoundingClientRect() --> 一個神奇的api

尺寸	計算	備註
width	offsetWidth	元素總體寬度
height	offsetHeight	元素總體高度
top	offsetTop(父元素) + boderWidth(父元素) + offsetTop	相對於視口的位置
left	offsetLeft(父元素) + boderWidth(父元素) + offsetLeft
right	left + offsetWidth
bottom	top + offsetHeight
x	left
y	top

event對象上的尺寸

尺寸	說明
clientX、clientY	提供事件發生時的應用客戶端區域的水平、垂直座標 (與頁面座標不一樣)---用於計算鼠標點的位置
layerX、layerY	鼠標相對於父元素外邊緣的位置
offsetX、offsetY	鼠標相對於父元素內邊緣的位置事件對象與目標節點的內填充邊（padding edge）在 X、Y軸方向上的偏移量
pageX、pageY	基於文檔的邊緣，考慮任何頁面的水平、垂直方向上的滾動。
screenX、screenY	鼠標相對於屏幕座標系的水平、垂直偏移量
x、y	clientX、clientY 屬性的別名.

------------------- >>>>>分割線<<<<< --------------css

------------------- >>>>>分割線<<<<< --------------html

代碼仍是得敲才能搞明白，眼睛記不住。因此，請複製下面的代碼，而後根據位置在紙上算一算java

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>drag</title>
  <style> * { margin: 0; padding: 0; } #container { border: 1px solid #000; position: absolute; left: 30px; top: 50px; width: 1000px; height: 800px; } #dragEl { position: absolute; width: 50px; height: 50px; border: 1px solid #000; left: 10px; top: 10px; } </style>
</head>
<body>
<div style="position: relative;height: 1000px">
  <div id="container">
    <div id="dragEl"></div>
  </div>
</div>
</body>
</html>
<script> const dragEl = document.getElementById('dragEl'); const { offsetLeft, // 10 ===> 相對於父元素 offsetTop, // 10 ===> 相對於父元素 offsetWidth, // 52 ==> 加邊框寬度 offsetHeight, // 52 ==> 加邊框寬度 clientWidth, // 50 ===> 不包含邊框 clientHeight, // 50 ===> 不包含邊框 } = dragEl; console.log(dragEl.offsetParent); // 獲取當前元素的位置+尺寸信息 // width: 52 ===> offsetWidth // height: 52 ===> offsetHeight // top: 61 ====> 50 + 1(父元素邊寬) + 10 // left: 41 ===> 30 + 1(父元素邊寬) + 10 // right: 93 ====> 41(left) + 50 + 2(本身的邊寬) // bottom: 113 ====> 61(top) + 50 + 2(本身的邊寬) // x: 41 = left // y: 61 = top const dragElRect = dragEl.getBoundingClientRect(); /* * 點擊event上的尺寸數據： * 提供事件發生時的應用客戶端區域的水平、垂直座標 (與頁面座標不一樣) * clientX: 73 = 32(layerX) + 41(left) * clientY: 90 = 29(layerY) + 61(top) * * 鼠標相對於父元素外邊緣的位置 * layerX: 32 * layerY: 29 * * 鼠標相對於父元素內邊緣的位置 * 事件對象與目標節點的內填充邊（padding edge）在 X、Y軸方向上的偏移量 * offsetX: 31 * offsetY: 28 * * 基於文檔的邊緣，考慮任何頁面的水平、垂直方向上的滾動。 * pageX: 73 * pageY: 90 * * 鼠標相對於屏幕座標系的水平、垂直偏移量 * screenX: 73 * screenY: 161 * * clientX、clientY 屬性的別名. * x: 73 * y: 90 * * */ dragEl.addEventListener('mousedown', function (e) { console.log(e); }); </script>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。