js实现简易拖拽图片验证功能

最新推荐文章于 2023-11-21 16:25:08 发布

Lemon Flower

最新推荐文章于 2023-11-21 16:25:08 发布

阅读量1.1k

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44350560/article/details/118120189

版权

分析：

我们想拖动小盒子移动。首先，我们知道以下信息，当鼠标在小盒子上点击时，可以得到鼠标的坐标（e.pageX、e.pageY）、大盒子的offsetLeft和offsetTop、小盒子的offsetLeft和offsetTop。移动鼠标后，其中鼠标在小盒子内的坐标（设为X，Y）是固定不动的，大盒子也是固定不动的，用新的pageX - X - 大盒子offsetLeft就得到了小盒子的offsetLeft，也就是小盒子左浮动的距离。

鼠标在小盒子内的X坐标 = e.pageX - 大盒子.offsetLeft - 小盒子.offsetLeft;

同理，

鼠标在小盒子内的Y坐标 = e.pageY - 大盒子.offsetTop - 小盒子.offsetTop;

先搭建HTML骨架和CSS样式：

<body>
    <section>
        <h3>请将头移动到相应的位置</h3>
        <div class="images">
            <img src="images/无头亚瑟.jpg" alt="pudding" draggable="false" height="200px">
            <img src="images/亚瑟.jpg" alt="head" draggable="false" height="81px">
        </div>
    </section>
</body>

<style>
        .images {
            position: relative;
        }
        
        img[alt="head"] {
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
    </style>

JavaScript代码：

<script>
        window.addEventListener('load', function() {
            var h3 = document.querySelector('h3');
            var large = document.querySelector('.images');
            var head = document.querySelector('img[alt="head"]');
            head.addEventListener('mousedown', function(e) {
                //获得鼠标在小图里面的坐标
                var headLeft = e.pageX - large.offsetLeft - head.offsetLeft;
                var headTop = e.pageY - large.offsetTop - head.offsetTop;

                function fn(e) {
                    //新的鼠标坐标 - 鼠标在小盒子坐标 - 大盒子的offset = 小盒子的浮动值
                    var X = e.pageX - headLeft - large.offsetLeft;
                    var Y = e.pageY - headTop - large.offsetTop;
                    head.style.left = X + 'px';
                    head.style.top = Y + 'px';
                }
                //添加移动事件
                document.addEventListener('mousemove', fn);
                document.addEventListener('mouseup', function() {
                    //判断是否移动到指定位置，这里误差给个10px
                    if (head.offsetLeft > 240 && head.offsetLeft < 250 && head.offsetTop > 27 && head.offsetTop < 37) {
                        h3.innerHTML = "验证成功";
                        h3.style.backgroundColor = "skyblue";
                    } else {
                        h3.innerHTML = "你是不是看岔啦";
                        h3.style.backgroundColor = "brown";
                    }
                    //弹起鼠标移除事件
                    document.removeEventListener('mousemove', fn);
                });
            });
        });
    </script>

images文件夹下所用的图片：

百度云盘链接：https://pan.baidu.com/s/19ipgHJwaRVudTjab-oMc9Q
提取码：0bt6

Lemon Flower

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
js实现简易拖拽图片验证功能

分析：我们想拖动小盒子移动。首先，我们知道以下信息，当鼠标在小盒子上点击时，可以得到鼠标的坐标（e.pageX、e.pageY）、大盒子的offsetLeft和offsetTop、小盒子的offsetLeft和offsetTop。移动鼠标后，其中鼠标在小盒子内的坐标（设为X，Y）是固定不动的，大盒子也是固定不动的，用新的pageX - X - 大盒子offsetLeft就得到了小盒子的offsetLeft，也就是小盒子左浮动的距离。鼠标在小盒子内的X坐标 = e.pageX - 大盒子.of..
复制链接

扫一扫