js 在窗口拖动一个元素的实现

最新推荐文章于 2024-03-27 21:44:11 发布

大闸蟹~

最新推荐文章于 2024-03-27 21:44:11 发布

阅读量132

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/YCHH1/article/details/125718262

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
            height: 107px;

            position: absolute;
            top: 0;
            left: 0;

            /* border: 1px solid #000; */
            cursor: move;
        }
    </style>
</head>
<body>
    <img src="./images/timg.jpg" id="img" alt="">
    <script>
        //鼠标在图片上按下后，可以拖拽图片在当前页面进行移动  鼠标松开后，停止移动
        var img = document.getElementById('img');

        //获取当前视口宽度的浏览器兼容性写法
        // var aw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        // var ah = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        var aw = document.documentElement.clientWidth - img.clientWidth;
        var ah = document.documentElement.clientHeight - img.clientHeight;
        console.log(img.clientHeight)

        img.onmousedown = function(e){
            // console.log(e);
            //阻止图片的默认行为
            e.preventDefault();

            //鼠标点在页面中的位置
            var mx = e.clientX;
            var my = e.clientY;
            // console.log(mx);

            //鼠标按下后，获取图片初始的位置
            var initX = parseInt(window.getComputedStyle(img).left);
            var initY = parseInt(window.getComputedStyle(img).top);
            // console.log(initX)

            //鼠标在当前页面中进行移动
            document.onmousemove = function(e){
                // console.log(e);

                //鼠标点在页面中的位置
                // var mx2 = e.clientX;
                // var my2 = e.clientY;
                // console.log(mx2);

                //获取移动距离
                // var moveX = mx2 - mx;
                // var moveY = my2 - my;
                // console.log(moveX);

                var moveX = e.clientX - mx;
                var moveY = e.clientY - my;

                //图片移动后的位置
                var ml = initX + moveX;
                var mt = initY + moveY;

                //边界判断
                if(ml < 0){
                    ml = 0;
                }else if(ml >= aw){
                    ml = aw;
                }

                if(mt < 0){
                    mt = 0;
                }else if(mt >= ah){
                    mt = ah;
                }

                //设置新的位置到图片上
                img.style.left = ml + "px";
                img.style.top = mt + "px";
            }
        }

        document.onmouseup = function(){
            document.onmousemove = null;
        }

        //窗口改变
        window.onresize = function(){
            aw = document.documentElement.clientWidth - img.clientWidth;
            ah = document.documentElement.clientHeight - img.clientHeight;
        }
    </script>
</body>
</html>