The following list is a list of dom elements and the size of the event, it is used in a variety of methods to calculate the position, need to be very familiar with.
>>>>> <<<<< dividing lines -------------- -------------------
elment element comes attributes
| size | Corresponding to the attribute of style | Remark |
|---|---|---|
| offsetWidth | width + 2 * borderWidth | Border width + 2 * |
| offsetHeight | height + 2 * borderWidth | Border height + 2 * |
| offsetTop | top | Relative to the parent element (for obtaining the position of the drag current element) |
| offsetLeft | left | Relative to the parent element (for obtaining the position of the drag current element) |
| clientWidth | width | Internal element width |
| clientHeight | height | Elements of interior height |
getBoundingClientRect () -> a magical api
| size | Compute | Remark |
|---|---|---|
| width | offsetWidth | Elements of the overall width |
| height | offsetHeight | Elements of the overall height |
| top | the offsetTop (parent element) + boderWidth (parent element) + offsetTop | With respect to the viewport |
| left | the offsetLeft (parent element) + boderWidth (parent element) + offsetLeft | |
| right | left + offsetWidth | |
| bottom | top + offsetHeight | |
| x | left | |
| Y | top |
Dimension of the event object
| size | Explanation |
|---|---|
| clientX, clientY | Level area when the client application provides event occurs, the vertical coordinates (different from the page coordinates) --- used to calculate the position of the mouse |
| layerX、layerY | The position of the mouse relative to the outer edge of the parent element |
| offsetX、offsetY | Filling the mouse relative to the inner edge (padding edge) offset positions with a target node event object within the parent element edge in the X, Y axis direction |
| pageX、pageY | Based on the edge of the document, considering the level of any page, scroll in the vertical direction. |
| screenX、screenY | Mouse coordinates relative to the screen horizontal, vertical offset |
| x, y | clientX, alias clientY property. |
>>>>> <<<<< dividing lines -------------- -------------------
>>>>> <<<<< dividing lines -------------- -------------------
Code still have to knock to thoroughly understand the eye can not remember. Therefore, copy the code below, and then calculate the position of the paper
<!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>
复制代码Reproduced in: https: //juejin.im/post/5cefdeace51d45598611b906