【JavaScript】移动色块案例实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）

一二__

于 2024-10-11 17:39:47 发布

阅读量849

点赞数 14

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_66584716/article/details/142859674

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

移动色块案例

实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。

移动色块：用户可以通过鼠标按住并拖动页面上的红色方块（#blocks）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。
显示当前位置：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（#positionDisplay）中。
自动变色：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 getRandomColor() 函数生成一个随机的颜色值，并使用 updateColor(color) 函数来更新色块的背景颜色和颜色显示区域（#colorDisplay）中的文本。
交互反馈：在拖动过程中，用户的每一次鼠标移动都会触发色块位置的更新，同时如果色块正在被拖动，那么颜色也会持续变化，直到用户释放鼠标左键为止。

练习：JavaScript 事件监听器（如 mousedown, mouseup, mousemove）与 CSS 样式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>移动色块</title>
        <style>
            #blocks {width: 100px;height: 100px;background-color: #FF0000;border-radius: 2px;position: absolute;cursor: pointer;}
            #colorDisplay,#positionDisplay {position: absolute;bottom: 0;left: 0;}
            #positionDisplay {left: 160px;}
        </style>
    </head>
    <body>
        <span id="colorDisplay">当前颜色: #FF0000 </span>
        <span id="positionDisplay">当前位置: (0, 0) </span>
        <div id="blocks"></div>
        <script>
            // 获取色块
            var div = document.getElementById("blocks");
            // 获取颜色位置显示区域
            var colorDisplay = document.getElementById("colorDisplay");
            var positionDisplay = document.getElementById("positionDisplay");
            var posX, posY, mouseX, mouseY;
            var dragging = false;
            // 自动变色定时器变量
            var colorChangeInterval;

            // 随机生成颜色
            function getRandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

            // 更新颜色并显示
            function updateColor(color) {
                div.style.backgroundColor = color;
                colorDisplay.textContent = '当前颜色: ' + color;
            }

            // 更新位置并显示
            function updatePosition(left, top) {
                div.style.left = left + 'px';
                div.style.top = top + 'px';
                positionDisplay.textContent = '当前位置: (' + left + ', ' + top + ')';
            }

            // 改变颜色
            function colorChange() {
                updateColor(getRandomColor());
            }

            // mousedown 开始拖拽
            div.addEventListener('mousedown', function (e) {
                dragging = true;
                mouseX = e.clientX;
                mouseY = e.clientY;
                posX = parseInt(div.style.left) || 0;
                posY = parseInt(div.style.top) || 0;
                e.preventDefault(); // 防止文本选中等默认行为
                // 开始拖拽时启动定时器
                if (!colorChangeInterval) {
                    colorChangeInterval = setInterval(colorChange, 300);
                }
            });

            // mouseup 停止拖拽
            document.addEventListener('mouseup', function (e) {
                dragging = false;
                // 停止拖拽时清除定时器
                if (colorChangeInterval) {
                    clearInterval(colorChangeInterval);
                    colorChangeInterval = null;
                }
            });

            // mousemove 更新位置
            document.addEventListener('mousemove', function (e) {
                if (dragging) {
                    var dx = e.clientX - mouseX;
                    var dy = e.clientY - mouseY;
                    var newX = posX + dx;
                    var newY = posY + dy;
                    updatePosition(newX, newY);
                }
            });
        </script>
    </body>
</html>

jQuery 版本

<body>
    <span id="colorDisplay">当前颜色: #FF0000 </span>
    <span id="positionDisplay">当前位置: (0, 0) </span>
    <div id="blocks"></div>

    <script>
        $(document).ready(function() {
            var $div = $('#blocks');
            var $colorDisplay = $('#colorDisplay');
            var $positionDisplay = $('#positionDisplay');
            var posX, posY, mouseX, mouseY;
            var dragging = false;
            // 自动变色定时器变量
            var colorChangeInterval;

            function getRandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

            function updateColor(color) {
                $div.css('backgroundColor', color);
                $colorDisplay.text('当前颜色: ' + color);
            }

            function updatePosition(left, top) {
                $div.css({left: left + 'px', top: top + 'px'});
                $positionDisplay.text('当前位置: (' + left + ', ' + top + ')');
            }

            function colorChange() {
                updateColor(getRandomColor());
            }

            $div.on('mousedown', function(e) {
                dragging = true;
                mouseX = e.clientX;
                mouseY = e.clientY;
                posX = parseInt($div.css('left')) || 0;
                posY = parseInt($div.css('top')) || 0;
                e.preventDefault();

                if (!colorChangeInterval) {
                    colorChangeInterval = setInterval(colorChange, 300);
                }
            });

            $(document).on('mouseup', function(e) {
                dragging = false;
                if (colorChangeInterval) {
                    clearInterval(colorChangeInterval);
                    colorChangeInterval = null;
                }
            });

            $(document).on('mousemove', function(e) {
                if (dragging) {
                    var dx = e.clientX - mouseX;
                    var dy = e.clientY - mouseY;
                    var newX = posX + dx;
                    var newY = posY + dy;
                    updatePosition(newX, newY);
                }
            });
        });
    </script>
</body>