JavaScript实现拖拽

使用mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Draggable Element</title><style>.draggable {position: absolute;width: 200px;height: 200px;background-color: #f00;cursor: move;}</style>
</head>
<body><div id="draggable" class="draggable"></div><script>// 获取需要拖拽的节点var draggableNode = document.getElementById('draggable');// 初始化拖拽状态var isDragging = false;var offset = { x: 0, y: 0 };// 绑定 mousedown 事件draggableNode.addEventListener("mousedown", function(event) {// 设置拖拽状态为 trueisDragging = true;// 计算鼠标相对于节点的偏移量offset.x = event.clientX - draggableNode.offsetLeft;offset.y = event.clientY - draggableNode.offsetTop;});// 绑定 mousemove 事件draggableNode.addEventListener("mousemove", function(event) {// 如果处于拖拽状态if (isDragging) {// 计算节点的新位置var left = event.clientX - offset.x;var top = event.clientY - offset.y;// 更新节点的位置draggableNode.style.left = left + "px";draggableNode.style.top = top + "px";}});// 绑定 mouseup 事件draggableNode.addEventListener("mouseup", function() {// 设置拖拽状态为 falseisDragging = false;});</script>
</body>
</html>