Q&A
ありがとうございます
デフォルトCSSは盲点でした。
このサイトを参考に、htmlオブジェクトをドラッグ＆ドロップできるコードを組んでみました。
↓ソースコードです
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <style> 6 p { 7 border: solid 1px black; 8 width: 100px; 9 height: 100px; 10 } 11 </style> 12</head> 13 14<body> 15 16 <p id="p1" draggable="true">drag</p> 17 18 <script> 19 const doc = document.getElementById('p1') 20 doc.onmousedown = function (event) { 21 let shiftX = event.clientX - doc.getBoundingClientRect().left; 22 let shiftY = event.clientY - doc.getBoundingClientRect().top; 23 24 console.log(doc.getBoundingClientRect().left) 25 doc.style.position = 'absolute'; 26 doc.style.zIndex = 1000; 27 document.body.append(doc); 28 29 moveAt(event.pageX, event.pageY); 30 31 // ボールを（pageX、pageY）座標の中心に置く 32 function moveAt(pageX, pageY) { 33 doc.style.left = pageX - shiftX + 'px'; 34 doc.style.top = pageY - shiftY + 'px'; 35 } 36 37 function onMouseMove(event) { 38 moveAt(event.pageX, event.pageY); 39 } 40 41 // (3) mousemove でボールを移動する 42 document.addEventListener('mousemove', onMouseMove); 43 44 // (4) ボールをドロップする。不要なハンドラを削除する 45 doc.onmouseup = function () { 46 document.removeEventListener('mousemove', onMouseMove); 47 doc.onmouseup = null; 48 }; 49 50 }; 51 52 doc.ondragstart = function () { 53 return false; 54 }; 55 </script> 56</body> 57 58</html>
しかし、ドラッグを始めるとボックスが少し下にジャンプしてしまいます。
そして、ボックスの上付近をクリックしジャンプした結果カーソルからボックスが離れると、
ドロップを検知できず、永久に離せなくなってしまいます。
そのため、javascript4行目を
javascript
1let shiftY = event.clientY - doc.getBoundingClientRect().top + 16;
としなければジャンプさせないことができません。
（なぜ16かは不明ですが、1pxずつ確かめた結果ジャンプしないのが16でした）
参考サイトでは同じコードでもジャンプしていません。
ボックスのサイズを変更してもズレは16pxでした。
なにが原因で16pxのズレが生じているのかわかりますでしょうか。
追伸
もっとよいコードをご存じの方はそちらも教えていただけるとありがたいです。
回答2件
0
余計なことですが
css で値が 0 の場合は、単位が不要です
寝ぼけて書いてみた。
html
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title></title> 4<style> 5p { 6 border: solid 1px black; 7 width: 100px; 8 height: 100px; 9 margin: 0; 10} 11</style> 12 13 14<body> 15 16<p>drag</p> 17 18<script> 19 20class A { 21 22 draggable = false; 23 diffX = null; 24 diffY = null; 25 26 #init = function (e) { 27 ['mousedown','mouseup', 'mousemove', 'mouseout'].forEach (etype=>e.addEventListener (etype, this, false)); 28 e.draggable = false; 29 e.style.position = 'absolute'; 30 }; 31 32 constructor (target) { 33 this.target = target; 34 this.#init (target); 35 } 36 37 locate (x, y) { 38 let s = this.target.style; 39 s.top = (this.diffY + y) + 'px'; 40 s.left = (this.diffX + x) + 'px'; 41 } 42 43 44 handleEvent (event) { 45 switch (event.type) { 46 case 'mousedown': 47 this.draggable = true; 48 let { top, left } = this.target.getBoundingClientRect (); 49 let { clientX: mx, clientY: my} = event; 50 this.diffX = (left - mx) | 0; 51 this.diffY = (top - my) | 0; 52 break; 53 54 case 'mouseup' : case 'mouseout' : 55 this.draggable = false; 56 break; 57 58 case 'mousemove': 59 if (this.draggable) { 60 let { pageX: x, pageY: y} = event; 61 this.locate (x, y); 62 } 63 break; 64 } 65 } 66 67} 68 69let p = new A (document.querySelector ('p')); 70 71//＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 72 73{//蛇足 74 let p = document.createElement ('p'); 75 for (let i = 1; i <= 12; i++) { 76 let _p = p.cloneNode (true); 77 let x = 600 + Math.sin (360/12*i*Math.PI/180)*300; 78 let y = 320 - Math.cos (360/12*i*Math.PI/180)*300; 79 document.body.appendChild (_p).append ('drag', i); 80 81 _p.style.position = 'absolute'; 82 _p.style.top = (y|0) + 'px'; 83 _p.style.left = (x|0) + 'px'; 84 new A (_p); 85 } 86} 87</script> 88
投稿2022/06/30 19:02
総合スコア616
0
ベストアンサー
ブラウザ(chrome)が暗黙でP要素に上下16pxのmarginを設定している事が原因のようです。
勝手にmarginを設定しないDIV要素にするか、CSSに追加でmargin:0px;を設定してみてください。
diff
1 p { 2 border: solid 1px black; 3+ margin: 0px; 4 width: 100px; 5 height: 100px; 6 }
投稿2022/06/30 18:11
編集2022/06/30 18:32
総合スコア2701
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/01 07:29