js实例——图层拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: orange;
            border:10px solid green;
            cursor:pointer;
            position:absolute;
            left:100px;
            top:20px;
        }
    </style>
</head>
<body>
    <h1>图层拖拽</h1>
    <hr>

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

    <script>

        //获取box元素
        var div = document.getElementById('box');

        //给元素绑定 鼠标按键按下事件
        div.onmousedown = function(env){
            //改变背景色
            div.style.backgroundColor = "#999";
            //获取event对象
            var e = env || window.event;
            //求出 鼠标在 div上的位置
            var left = e.clientX - div.offsetLeft;
            var top = e.clientY - div.offsetTop;

            //求窗口的宽高
            var w = window.innerWidth;
            var h = window.innerHeight;


            //绑定鼠标 移动事件
            document.onmousemove = function(en){
                //获取event对象
                var e = en || window.event;
                //获取鼠标坐标
                var x = e.clientX;
                var y = e.clientY;
                //设置 div 的位置
                div.style.left = Math.min(Math.max(x - left, 0), w - 220) +'px';
                div.style.top = Math.min(Math.max(y - top, 0), h - 220)+ 'px';
            }
        }


        //鼠标按键抬起事件
        div.onmouseup = function(){
            div.style.backgroundColor = "orange";
            //解除 onmousemove 事件绑定
            document.onmousemove = function(){
                
            }
        }

    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容