拖拽

最新推荐文章于 2024-08-22 22:54:31 发布

追忆峥嵘岁月稠

最新推荐文章于 2024-08-22 22:54:31 发布

阅读量208

点赞数

分类专栏： html js css

本文链接：https://blog.csdn.net/qq_38651471/article/details/77726145

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        *{margin: 0;padding: 0;}
        #box{
            position:absolute;width: 100px;
            height:100px;
        background: red;}
    </style>
    <script src="js-拖拽.js">

    var obox=document.getElementById('box');

    obox.onmousedown=function (ev) {
        var e=ev || window.event;

        var li=e.clientX-obox.offsetLeft;  //鼠标点击的位置到div左边框的距离
        var lT=e.clientY-obox.offsetTop;   //鼠标点击的位置到div上边框的距离

        // 针对低版本IE的方法，setCapture方法在oBox元素和下面的元素中间添加了一个透明层
        if(obox.setCapture)
        {
            obox.setCapture();
        }

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

            var il = e.clientX - li;   //计算移动之后的div到浏览器左边的距离(left)
            var Tl = e.clientY - lT;   //计算移动之后的div到浏览器上边的距离(top)

            var MaxW=document.documentElement.clientWidth-obox.offsetWidth;  //浏览器视窗宽度-元素实际宽度
            var MaxH=document.documentElement.clientHeight-obox.offsetHeight; //浏览器视窗高度-元素实际高度
            //不超过左边的边框
            if(il<0)
            {
                il=0;
            }
            //不超过上边的边框
            if(Tl<0)
            {
                Tl=0;
            }

            //不超过右边的边框
            if(il>MaxW)
            {
                il=MaxW;
            }
            //不超过下边的边框
            if(Tl>MaxH)
            {
                Tl=MaxH;
            }


            //将值附给obox
            obox.style.left = il + 'px';
            obox.style.top = Tl + 'px';

        };

            document.onmouseup=function () {

                //销毁机制
                document.onmousemove=null;
                document.onmouseup=null;

                //取消透明层
                if(obox.releaseCapture)
                {
                    obox.releaseCapture();
                }
            };
        return false;  //阻止浏览器的默认行为，会选中文字
    }

</script>
</head>
<body>
    <div id="box"></div>
    
</body>
</html>

追忆峥嵘岁月稠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录