<html>
<head>
<title>
DND
</title>
<style>
.div {
background-color: black;
width: 100px;
height: 100px;
position: absolute;
color: bisque;
cursor: move;
left: 35%;
top: 10%;
}
</style>
</head>
<body>
<div class="div">
HALLLOW
</div>
</body>
<script>
const div = document.querySelector("div");
let offsetX, offsetY;
const move = (e) => {
console.log("move:",e.clientX - offsetX)
div.style.left = `${e.clientX - offsetX}px`;
div.style.top = `${e.clientY - offsetY}px`;
}
div.addEventListener("mousedown", (e) => {
console.log("mousedown:",e.clientX, div.offsetLeft)
offsetX = e.clientX - div.offsetLeft;
offsetY = e.clientY - div.offsetTop;
document.addEventListener("mousemove", move);
})
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
})
</script>
</html>
No comments:
Post a Comment