JavaScript divを動かす

Question

マウスのドラッグでdivを動かすものを作ってます
onmousemove中に
a.style.left=e.clientX-a.clientWidth/2;
a.style.top=e.clientY-a.clientHeight/2;
でマウスが中央にきてしまうのですが、
mousedownしたポジションを指定するにはどうしたらいいでしょうか？

具体的に書くと
赤色の左上だったり右上だったりをクリックしてもマウスが中央に移動するので、
これをクリックしたポジションにしたいです

<div id="a" style="position:absolute;width:200px;height:200px;background:red"></div>

<script>
var flag=0;
a.onmousedown=function(e){
flag=1;
}
a.onmousemove=function(e){
if(flag==1){
a.style.left=e.clientX-a.clientWidth/2;
a.style.top=e.clientY-a.clientHeight/2;
}
}
a.onmouseup=function(){
flag=0;
}
</script>

Answer 1

<style>
.draggable{position:absolute;}
#a{width:200px;height:200px;background:red;}
#b{width:150px;height:150px;background:blue;}
#c{width:100px;height:100px;background:yellow;}
</style>
<script>
const drag = {
isMouseDown : false,
target : null,
offsetX : 0,
offsetY : 0,
}
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.draggable').forEach(x=>{
    x.addEventListener('mousedown',e=>{
      drag.target = x;
      const rect = x.getBoundingClientRect();
      drag.offsetX = e.clientX - rect.left;
      drag.offsetY = e.clientY - rect.top;;
      drag.isMouseDown = true;
    });
  });
});
document.addEventListener('mouseup',()=>{
  drag.isMouseDown = false;
});
document.addEventListener('mousemove',e=>{
  if (drag.isMouseDown == true) {
    drag.target.style.left = e.clientX - drag.offsetX;
    drag.target.style.top = e.clientY - drag.offsetY ;
  }
});
</script>
<div id="a" class="draggable"></div>
<div id="b" class="draggable"></div>
<div id="c" class="draggable"></div>

Answer 2

こうですね。マウスダウン時の対象の左上からのオフセットを覚えておくのがポイントです。

<div id="a" style="position:absolute;width:200px;height:200px;background:red;"></div>

<script>
var flag=0;
var offsetX = 0;
var offsetY = 0;
a.onmousedown=function(e){
  flag=1;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
}
a.onmousemove=function(e){
  if(flag==1){
    a.style.left = e.clientX - offsetX + "px";
    a.style.top = e.clientY - offsetY + "px";
  }
}
a.onmouseup=function(){
  flag=0;
}
</script>

Comments

[退会済みユーザー]

もう一つ教えていただきたいのですが、
赤いボックスにinput rangeを置いたんですが、
rangeのつまみを動かすと同時にdivの動きも発生してしまいます
赤いつまみを動かしてる場合divの動き発生させなくすることはできますか？

https://kita-note.com/js-cancel-event
この辺りを見ていますが今一よくわかりません
<div id="a" style="position:absolute;width:200px;height:200px;background:red;"></div>

<script>
window.onload=function(){
var range = document.createElement('input');
range.type = "range";
range.value = "0";
range.style.width = "200px";
range.style.height = "30px";
a.appendChild(range);

}
var flag=0;
var offsetX = 0;
var offsetY = 0;
a.onmousedown=function(e){
flag=1;
offsetX = e.offsetX;
offsetY = e.offsetY;
}
a.onmousemove=function(e){
if(flag==1){
a.style.left = e.clientX - offsetX + "px";
a.style.top = e.clientY - offsetY + "px";
}
}
a.onmouseup=function(){
flag=0;
}
</script>