拖动元素进行移动

最新推荐文章于 2023-02-06 16:04:31 发布

weixin_43700362

最新推荐文章于 2023-02-06 16:04:31 发布

阅读量143

点赞数

文章标签：拖动元素进行移动

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103228220

版权

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width:200px;
        height:200px;
        background: red;
        position: absolute;
        left:100px;
        top:100px;
    }

    #box1{
        width:100px;
        height:100px;
        background: yellow;
        position: absolute;
        left:50px;
        top:50px;

    }
    img{
        width:200px;
        height:100px;
        position: absolute;
    }
</style>
<body>
<div id="box">
   box
</div>
<div id="box1">
    box1
</div>
<img src="img/3.jpg" alt="">


<script>

//    获取元素
    var box = document.getElementById("box");
    var box1 = document.getElementById("box1");
    var pic = document.querySelector("img");

//调用drag函数
  drag(box);
    drag(box1);
    drag(pic);

    function drag (elem){
//        当鼠标按下事件
        elem.onmousedown = function(event){
//            event适配不同浏览器
            event = event || window.event;
//            误差，鼠标按下的地方到浏览器显示窗口的距离减去元素左边到定位父元素的距离。
//            （如果没有定位父元素的话，就是到body的距离）
            var deltaX =event.clientX - elem.offsetLeft;
            var deltaY = event.clientY - elem.offsetTop;
//            鼠标移动事件
            document.onmousemove = function(event){
                event = event || window.event;
                
//                设置元素的位置，别忘记加px单位。
                elem.style.left = event.clientX - deltaX +"px";
                elem.style.top = event.clientY - deltaY +"px";

                //清除默认事件，图片可以移动了，box里的文字不会被选中了。
                //默认事件--图片不会被拖着移动，box里的文字会被“选中”。
//                （还需要给元素设置绝对定位，元素才可以移动）
                return false;
            }
        }

        
//        鼠标抬起之后，移动事件为空
        elem.onmouseup = function(){
            document.onmousemove = null;
        }

    }
</script>
</body>
</html>

运行结果：

初始状态：
在这里插入图片描述
移动之后：

元素移动范围

设置元素的移动范围不超过浏览器窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width:200px;
        height:200px;
        background: red;
        position: absolute;
        left:100px;
        top:100px;
    }

    #box1{
        width:100px;
        height:100px;
        background: yellow;
        position: absolute;
        left:50px;
        top:50px;

    }
    img{
        width:200px;
        height:100px;
        position: absolute;
    }
</style>
<body>
<div id="box">
    box
</div>
<div id="box1">
    box1
</div>

<img src="img/3.jpg" alt="">


<script>
    var box = document.getElementById("box");
    var box1 = document.getElementById("box1");
    var pic = document.querySelector("img");

    drag(box);
    drag(box1);
    drag(pic);

    function drag (elem){
        elem.onmousedown = function(event){
            event = event || window.event;
            var deltaX =event.clientX - elem.offsetLeft;
            var deltaY = event.clientY - elem.offsetTop;

            document.onmousemove = function(event){
                event = event || window.event;

                var l =  event.clientX - deltaX;
                var t = event.clientY - deltaY;
         //对元素的移动限制范围，不会出去浏览器窗口
//                左边如果小于0的话，设置左边位置等于0
                if( l<0 ) l = 0;
                if(t <0 ) t = 0;
//      如果左边位置大于，屏幕可视宽度减去元素的offsetWidth（width+左右padding+左右border），则设左边位置为此
                if(l > document.documentElement.clientWidth - elem.offsetWidth)
                l = document.documentElement.clientWidth - elem.offsetWidth;
//     如果上边位置大于，屏幕可视高度减去元素的clientHeight（height+上下padding+上下border），则设上边位置为此
                if(t >document.documentElement.clientHeight - elem.offsetHeight )
                t = document.documentElement.clientHeight - elem.offsetHeight;

                elem.style.left = l +"px";
                elem.style.top =  t  +"px";

                //清除默认事件，图片可以移动了（还需要给图片设置绝对定位），box里的文字不会被选中了。
                return false;
            }
        }

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

    }
</script>
</body>
</html>

weixin_43700362

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动元素进行移动

程序：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ width:200px; he...
复制链接

扫一扫