event.clientXとevent.clientYだけでズレずに要素をドラッグするにはどうすればいいですか？できますか？

mousemoveイベントで要素をマウスカーソルに追従させるばあい、要素のstyle.leftとstyle.topにevent.clientXとevent.clientYだけを設定すると要素の左上がカーソルの座標になってしまうので

mousedownイベントのevent.offsetXとevent.offsetY、またはevent.pageXとevent.pageYと要素のgetBoundingClientRect()を使って要素内の座標を差し引くと思いますが、

impetusというパッケージはevent.clientXとevent.clientYしか使っていないっぽいのに要素の左上にズレないのはどうしてですか？どうやっていますか？

impetusの公式デモページ

http://chrisbateman.github.io/impetus/

impetusのソース（の該当箇所（と思われる箇所））

比較用のコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <style>
7.draggable {
8  width: 50px;
9  height: 50px;
10  position: absolute;
11  left: 0;
12  top: 0;
13}
14.draggable::before {
15  content: attr(id);
16}
17#good {
18  background: lime;
19}
20#bad {
21  background: red;
22}
23#impetus {
24  background: blue;
25}
26    </style>
27  </head>
28  <body>
29    <div class="draggable" id="good"></div>
30    <div class="draggable" id="bad"></div>
31    <div class="draggable" id="impetus"></div>
32    <script src="https://unpkg.com/impetus"></script>
33    <script>
34//good
35document.getElementById('good').addEventListener('mousedown', ({offsetX, offsetY, pageX, pageY, target}) => {
36  if (offsetX === void 0 || offsetY === void 0) {
37    const {left, top} = target.getBoundingClientRect()
38    offsetX = pageX - left
39    offsetY = pageY - top
40  }
41  const mousemove = e => {
42    e.preventDefault()
43    target.style.left = e.clientX - offsetX + 'px'
44    target.style.top = e.clientY - offsetY + 'px'
45  }
46  const mouseup = e => {
47    document.removeEventListener('mousemove', mousemove)
48    document.removeEventListener('mouseup', mouseup)
49  }
50  document.addEventListener('mousemove', mousemove)
51  document.addEventListener('mouseup', mouseup)
52})
53//bad //only clientX, clientY
54document.getElementById('bad').addEventListener('mousedown', ({target}) => {
55  const mousemove = e => {
56    e.preventDefault()
57    target.style.left = e.clientX + 'px'
58    target.style.top = e.clientY + 'px'
59  }
60  const mouseup = e => {
61    document.removeEventListener('mousemove', mousemove)
62    document.removeEventListener('mouseup', mouseup)
63  }
64  document.addEventListener('mousemove', mousemove)
65  document.addEventListener('mouseup', mouseup)
66})
67//impetus
68new Impetus({
69  source: document.getElementById('impetus'),
70  update(x, y) {
71    this.style.left = x + 'px'
72    this.style.top = y + 'px'
73  }
74})
75    </script>
76  </body>
77</html>

上記「比較用のコード」のデモページ

「比較用のコード」の「bad」をどう書き換えればevent.clientXとevent.clientYだけでズレずに要素をマウスカーソルに追従させられますか？

行動規範の内容に同意します

回答1件

ベストアンサー

発想としては、マウスの移動量と同じ量だけ、対象オブジェクトのleft, topを変化させれば良いと思います。

Impetusも、そんな感じみたいですよ。
https://github.com/chrisbateman/impetus/blob/master/src/Impetus.js#L291-L292

「bad」をどう書き換えればevent.clientXとevent.clientYだけでズレずに要素をマウスカーソルに追従させられますか？

「event.clientXとevent.clientYだけで」と言われると困るのですが、
e.movementXやe.movementYを見れば移動量が分かるので、
↓こんな感じでいけると思います。

javascript
1var mousemove = function(e) {
2  e.preventDefault()
3  target.style.left = parseInt(target.style.left||'0') + e.movementX + 'px';
4  target.style.top = parseInt(target.style.top||'0') + e.movementY + 'px';
5}

※leftやtopの初期値がpx単位で指定されている、あるいは初期値なし、と想定してます。

投稿2020/11/22 01:13

gpsoft

総合スコア1323

_._

2020/11/22 03:32

できました！！！！ありがとうございます！offsetXもpageXもgetBoundingClientRectもいらんかったんや！本当にありがとうございました！ImpetusがpointerLastXとpointerCurrentXで移動量を記録しているやつ、event.movementXってやつでできるんですね