<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单的拖拽实现代码html+js</title>
<style>
#dragDom {
position: absolute;
top: 0;
left: 0;
height: 88px;
width: 88px;
user-select: none;
cursor: pointer;
background-color: aquamarine;
}
</style>
</head>
<body>
<div
style="
position: relative;
background-color: antiquewhite;
width: 600px;
height: 280px;
overflow: auto;
margin: 10px;
"
>
<div id="dragDom">拖动</div>
<script>
var str = "";
for (var i = 0; i < 1000; i++) {
str += "<p>" + i + "</p>";
}
document.write(str);
</script>
</div>
<script>
const dragDom = document.getElementById("dragDom");
dragDom.addEventListener("pointerdown", onpointerdown);
function onpointerdown(e) {
document.addEventListener("pointermove", onpointermove);
document.addEventListener("pointerup", onpointerup);
function onpointermove(e) {
dragDom.style.left =
parseInt(dragDom.style.left.replace("px", "") || 0) +
e.movementX +
"px";
dragDom.style.top =
parseInt(dragDom.style.top.replace("px", "") || 0) +
e.movementY +
"px";
}
function onpointerup(e) {
document.removeEventListener("pointermove", onpointermove);
document.removeEventListener("pointerup", onpointerup);
}
}
</script>
</body>
</html>