使用JavaScript拖拽盒子跟着鼠标动的效果

在前端开发中，实现一个元素跟随鼠标移动的效果，通常涉及到监听鼠标的 mousemove 事件，并动态地更新元素的样式。以下是一个简单的示例，展示如何使用原生JavaScript来实现一个盒子跟随鼠标移动的效果：

  1. HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽盒子示例</title>
    <style>
        #draggableBox {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="draggableBox"></div>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript代码 (script.js)：
document.addEventListener('DOMContentLoaded', function() {
    const box = document.getElementById('draggableBox');
    let offsetX, offsetY, mouseX, mouseY;
    let isDragging = false;

    box.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - box.offsetLeft;
        offsetY = e.clientY - box.offsetTop;
    });

    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        mouseX = e.clientX - offsetX;
        mouseY = e.clientY - offsetY;
        box.style.left = mouseX + 'px';
        box.style.top = mouseY + 'px';
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });
});

在这个示例中，我们首先监听 mousedown 事件来开始拖拽操作，并记录鼠标与盒子之间的初始偏移量。然后，在 mousemove 事件中，我们更新盒子的位置以跟随鼠标移动。最后，在 mouseup 事件中，我们结束拖拽操作。

请注意，为了使盒子能够移动，我们在CSS中将其 position 属性设置为 absolute。这样，我们就可以通过修改其 left 和 top 属性来动态地改变其位置。

posted @ 2024-12-16 06:06  王铁柱6  阅读(91)  评论(0)    收藏  举报