盒子的脱拽

最新推荐文章于 2024-04-30 16:57:21 发布

瞧我的记性又把你当人看了

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量289

点赞数

分类专栏： JS小特效分享文章标签： javascript 鼠标小特效

本文链接：https://blog.csdn.net/a976196371/article/details/52892049

版权

JS小特效分享专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这次我们先做个简单的小特效盒子的拖拽，首先先理解下什么是盒子的拖拽。就是说在一个页面中创建一个正方形的盒子，然后通过鼠标按下并拖动来改变这个正方形的位置。
知道这个我们就来先分析步骤：
①、创建一个div给一个宽高，（既然要改变位置就得给他一个绝对定位）
②、设置js属性首先要获取这个div
③、要改变div的位置，就先声明一个X,Y轴的坐标
④、要清楚这个效果所用到的事件有鼠标按下事件，以及移动，但是这里的移动可以说是鼠标抚摸事件，最后移动后要有鼠标谈起事件。
⑤、重点。设置事件中div的坐标
简单的有个思路。我们就来看代码怎么实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                top: 100px;
                left: 100px;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var oBox = document.getElementById('box');

                var disX = 0; //声明的div的X轴坐标
                var disY = 0;
                oBox.onmousedown = function(ev) { //鼠标按下事件
                    var iEvent = ev || event; //这里的iEvent是用来获取事件的详细信息：鼠标位置，键盘按键的。ev ||event是兼容性处理
                    disX = iEvent.clientX - oBox.offsetLeft; //div的X轴坐标=鼠标点击时的X的值-盒子离浏览器左边的值
                    disY = iEvent.clientY - oBox.offsetTop; //div的Y轴坐标=鼠标点击时的Y的值-盒子离浏览器顶部的值
                    //现在的话我们就能知道现在盒子的坐标，那我们通过改变盒子的坐标就能让盒子真正意义上的移动

                    document.onmousemove = function(ev) { //鼠标抚摸事件。这里写document不写oBox是考虑到作用域的为题
                        var iEvent = ev || event;
                        //div移动后的x，y坐标
                        var left = iEvent.clientX - disX; //这个道理和上面的一样
                        var top = iEvent.clientY - disY;
                        oBox.style.left = left + 'px';
                        oBox.style.top = top + 'px';
                    }
                    document.onmouseup = function() {
                        //鼠标弹起时清空按下和抚摸的值
                        document.onmousedown = null;
                        document.onmousemove = null;
                    }

                }

            }
        </script>
    </head>

    <body>
        <div id="box"></div>
    </body>

</html>

通过上面的代码就能实现盒子的拖拽。但是呢，发现一个bug，就是盒子会跑出显示区域，这样就没法移动了，那下面我们就继续修复这个bug。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                top: 100px;
                left: 100px;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var oBox = document.getElementById('box');

                var disX = 0; //声明的div的X轴坐标
                var disY = 0;
                oBox.onmousedown = function(ev) { //鼠标按下事件
                    var iEvent = ev || event; //这里的iEvent是用来获取事件的详细信息：鼠标位置，键盘按键的。ev ||event是兼容性处理
                    disX = iEvent.clientX - oBox.offsetLeft; //div的X轴坐标=鼠标点击时的X的值-盒子离浏览器左边的值
                    disY = iEvent.clientY - oBox.offsetTop; //div的Y轴坐标=鼠标点击时的Y的值-盒子离浏览器顶部的值
                    //现在的话我们就能知道现在盒子的坐标，那我们通过改变盒子的坐标就能让盒子真正意义上的移动

                    document.onmousemove = function(ev) { //鼠标抚摸事件。这里写document不写oBox是考虑到作用域的为题
                        var iEvent = ev || event;
                        //div移动后的x，y坐标
                        var left = iEvent.clientX - disX; //这个道理和上面的一样
                        var top = iEvent.clientY - disY;
                        if(left < 0) {//限定离左边的距离如果小于0，就让左边的值就一直等于0
                            left = 0;
                        } else if(left > document.documentElement.clientWidth - oBox.offsetWidth) {
                            //限定右侧里左边的距离，通过可视区域的宽度-盒子的宽度能知道右侧离左边的距离如果左边得值大于这个距离，就同样让他等于固定的距离。
                            left = document.documentElement.clientWidth - oBox.offsetWidth;
                        }
                        if(top < 0) {//顶部的限制和左边同理
                            top = 0;
                        } else if(top > document.documentElement.clientHeight - oBox.offsetWidth) {
                            top = document.documentElement.clientHeight - oBox.offsetWidth;
                        }
                        oBox.style.left = left + 'px';
                        oBox.style.top = top + 'px';
                    }
                    document.onmouseup = function() {
                        //鼠标弹起时清空按下和抚摸的值
                        document.onmousedown = null;
                        document.onmousemove = null;
                    }

                }

            }
        </script>
    </head>

    <body>
        <div id="box"></div>
    </body>

</html>

瞧我的记性又把你当人看了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子的脱拽

这次我们先做个简单的小特效盒子的拖拽，首先先理解下什么是盒子的拖拽。就是说在一个页面中创建一个正方形的盒子，然后通过鼠标按下并拖动来改变这个正方形的位置。知道这个我们就来先分析步骤： ①、创建一个div给一个宽高，（既然要改变位置就得给他一个绝对定位） ②、设置js属性首先要获取这个div ③、要改变div的位置，就先声明一个X,Y轴的坐标 ④、要清楚这个效果所用到的事件有鼠标按下事
复制链接

扫一扫