js请用一段代码实现一个拖拽功能
以下是一个简单的实现拖拽功能的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>拖拽功能示例</title>
<style>
#drag {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
</style>
</head>
<body>
<div id="drag"></div>
<script>
var drag = document.getElementById("drag");
var x, y;
drag.addEventListener("mousedown", function(e) {
x = e.clientX - drag.offsetLeft;
y = e.clientY - drag.offsetTop;
document.addEventListener("mousemove", move);
});
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", move);
});
function move(e) {
drag.style.left = e.clientX - x + "px";
drag.style.top = e.clientY - y + "px";
}
</script>
</body>
</html>
该代码实现了一个简单的拖拽功能，当鼠标在 #drag 元素上按下时，记录当前鼠标位置与元素左上角的距离，然后在 mousemove 事件发生时更新元素的位置，使其跟随鼠标移动。当鼠标松开时，停止更新元素位置
原文地址: https://www.cveoy.top/t/topic/cOj7 著作权归作者所有。请勿转载和采集!