マウスの座標を取得する mousedown mousemove mouseup
<div style="height: 100px;width: 100px;border-radius: 50%;background-color: yellow;position: absolute;"></div>document.addEventListener('mousedown', e => {
console.log("clientX: " + e.clientX, e.clientY);
console.log("offsetX: " + e.offsetX, e.offsetY);
console.log("pageX: " + e.pageX, e.pageY);
console.log("screenX: " + e.screenX, e.screenY);
});
const circle = document.querySelector("div");
document.addEventListener("mousedown", () => {
document.addEventListener("mousemove", moveObj);
});
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", moveObj);
});
function moveObj(e) {
circle.style.left = `${e.clientX}px`;
circle.style.top = `${e.clientY}px`;
}“clientX”: ブラウザ左上を基準
“offsetX”: 要素左上を基準
“pageX” : ページスクロールを含めたブラウザ左上を基準
“screenX”: デバイスの左上を基準