阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

javascript-重点悬浮框拖拽案例 原

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116286.html

同样是5年开发,年薪50万和年薪15万的差距在哪里….>>>

<script>

    var obox = document.querySelector(".box");

    var clientW = document.documentElement.clientWidth;

    var clientH = document.documentElement.clientHeight;

    var w = obox.offsetWidth;

    var h = obox.offsetHeight;

 

    // 行为过程:按下之后,移动,再抬起

    obox.addEventListener("mousedown",function(eve){

        // 获取按下的坐标,在按下的事件对象身上

        var e1 = eve || window.event;

        // 为了防止移动过快,鼠标在某一瞬间离开元素,移动事件加给页面

        document.addEventListener("mousemove",move)

        // 因为移动事件在抬起的时候,被删除,所以提前起名

        function move(eve){

            var e = eve || window.event;

            // 计算元素要移动的真正的距离:为鼠标相对于页面的坐标减去按下时相对于元素的坐标

            var l = e.pageX - e1.offsetX;

            var t = e.pageY - e1.offsetY;

            // 边界限定

            if(t < 0){

                t = 0

            }

            if(l < 0){

                l = 0

            }

            if(l > clientW - w){

                l = clientW - w;

            }

            if(t > clientH - h){

                t = clientH - h;

            }

 

            // 设置位置

            obox.style.left = l + "px"

            obox.style.top = t + "px"

        }

        // 抬起时,删除移动,删除抬起

        document.addEventListener("mouseup",up)

        function up(){

            document.removeEventListener("mousemove",move)

            document.removeEventListener("mouseup",up)

        }

    })

 

</script>

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!