以下のリストは、DOM要素のリストと、イベントの大きさであり、それは位置を計算するために様々な方法で使用される、非常に精通している必要があります。
分割線>>>>> <<<<< -------------- -------------------
elment要素には属性が来ます
| サイズ | スタイルの属性に対応 | リマーク |
|---|---|---|
| offsetWidth | 幅+ 2 * borderWidth | 境界線の幅+ 2 * |
| offsetHeight | 高さ+ 2 * borderWidth | ボーダーの高さ+ 2 * |
| offsetTop | 上 | （ドラッグ現在の要素の位置を取得するための）親要素に対して |
| offsetLeft | 左 | （ドラッグ現在の要素の位置を取得するための）親要素に対して |
| clientWidth | 幅 | 内部素子幅 |
| clientHeight | 高さ | 室内高の要素 |
getBoundingClientRect（） - >魔法のAPI
| サイズ | 計算 | リマーク |
|---|---|---|
| 幅 | offsetWidth | 全体の幅の要素 |
| 高さ | offsetHeight | 全体の高さの要素 |
| 上 | offsetTop（親要素）+ boderWidth（親要素）+ offsetTop | ビューポートに関して |
| 左 | offsetLeft（親要素）+ boderWidth（親要素）+ offsetLeft | |
| 右 | 左+ offsetWidth | |
| 底 | トップ+ offsetHeight | |
| バツ | 左 | |
| と | 上 |
イベントオブジェクトの寸法
| サイズ | 説明 |
|---|---|
| clientX、clientYプロパティ | クライアント・アプリケーションは、イベントを提供するレベル領域が---垂直座標（ページとは異なる座標）、発生したマウスの位置を計算するために使用します |
| layerX、layerY | 親要素の外縁にマウスの位置 |
| offsetX、offsetY | 内縁（パディングエッジ）にマウスを相対的に充填するX、Y軸方向に親要素の縁内のターゲットノードイベントオブジェクトとの位置をオフセット |
| pageX、pageY | 文書のエッジに基づいて、任意のページのレベルを考慮すると、垂直方向にスクロールします。 |
| がscreenX、screenYの | マウスがスクリーンの水平からの相対座標、垂直オフセット |
| X、Y | clientX、別名clientYプロパティプロパティ。 |
分割線>>>>> <<<<< -------------- -------------------
分割線>>>>> <<<<< -------------- -------------------
コードはまだ完全に目が覚えていないことを理解するためにノックする必要があります。したがって、以下のコードをコピーし、紙の位置を計算します
<!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>
复制代码ます。https：//juejin.im/post/5cefdeace51d45598611b906で再現