让我为大家带来一个小案例吧!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1 {
                width: 100px;
                height: 100px;
                background-color: black;
                margin-bottom: 10px;
                position: relative;
                left: 0;
                top: 0;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: pink;
                margin-bottom: 10px;
                margin-left: 200px;
            }
            .box3 {
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-top: 120px;
                margin-left: 200px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
    <script>
        //获取要移动的盒子
         var div = document.querySelector(".box1")
        //获取其他2个盒子
        var div1=document.querySelector(".box2")
        var div2=document.querySelector(".box3")
        div.onmousedown = function(e){
            //获取盒子距离页面多少
            var divX =div.offsetLeft
            var divY =div.offsetTop
            //获取盒子点击的xy坐标
            var downX =e.clientX
            var downY =e.clientY
            document.onmousemove=function(e){
            console.log(e);
            // if(div.offsetLeft<1){
            //     alert("超出")
            // }
            //获取盒子点击的地方距离document点击的坐标的差
            var moveX =e.clientX - downX
            var moveY =e.clientY - downY
            //获取移动鼠标想放哪放哪
            // div.style.left =divX+moveX+"px"
            // div.style.top =divY+moveY+"px"
            //这个的中心点在中间
            div.style.left =e.clientX - div.offsetWidth/2+"px"
            div.style.top =e.clientY - div.offsetHeight/2+"px"
            //拿他们的宽高去判断坐标
            if(e.clientX<div1.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div1.offsetTop/2&&e.clientY<div1.offsetTop*2+40){
                console.log(div1.offsetTop);
                div1.style.backgroundColor="green"
                }else{
                    div1.style.backgroundColor="pink"
                }
                //拿他们的距离去判断
             if(e.clientX<div2.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div2.offsetTop-div.offsetHeight/2&&e.clientY<div2.offsetTop+div.offsetHeight+div.offsetHeight/2){
                div2.style.backgroundColor="blue"
                }else {
                    div2.style.backgroundColor="orange"
                }
            }
        }
        //如果按起就不动
        div.onmouseup = function(){
            document.onmousemove = null
        }
    </script>
</html>

效果图:

到此这篇关于让你的网页动起来:Javascript+CSS拖曳盒子指南的文章就介绍到这了,更多相关 Javascript+CSS拖曳盒子内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部