javascript 鼠标拖拽div移动

最新推荐文章于 2024-07-17 09:19:35 发布

浮生途

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量981

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jy123_123/article/details/90109141

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function (ev) {
            var oDiv = document.getElementById("div1");
            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function (ev) {
                var oEvent = ev || event;
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;
                    if(l<0){
                       l=0;
                    }
                    else if (l>document.documentElement.clientWidth-oDiv.offsetWidth){
                        l=document.documentElement.clientWidth-oDiv.offsetWidth
                    }
                    if(t<0){
                        t=0;
                    }
                    else if (t>document.documentElement.clientHeight-oDiv.offsetHeight){
                        t=document.documentElement.clientHeight-oDiv.offsetHeight
                    }
                    oDiv.style.left = l + "px";
                    oDiv.style.top = t + "px";


                };

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

        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>