js实现拖拽事件

最新推荐文章于 2024-06-04 17:34:12 发布

乌鲁托拉曼

最新推荐文章于 2024-06-04 17:34:12 发布

阅读量9.9k

点赞数

分类专栏： JavaScript学习之路 HTML+CSS

本文链接：https://blog.csdn.net/lizhengxv/article/details/79628293

版权

JavaScript学习之路同时被 2 个专栏收录

43 篇文章 2 订阅

订阅专栏

HTML+CSS

25 篇文章 1 订阅

订阅专栏

HTML

<body> 
     <div></div>
</body>

CSS

div{
        position: absolute;
        width: 200px;
        height: 200px;
        background: #369
    }

JS

window.onload = function(){
    var oDiv = document.getElementsByTagName("div")[0];

    /*鼠标点击的位置距离DIV左边的距离 */
    var disX = 0;
    /*鼠标点击的位置距离DIV顶部的距离*/
    var disY = 0;
    oDiv.onmousedown = function(){
        var e = e || window.event;
        disX = e.clientX - oDiv.offsetLeft;
        disY = e.clientY- oDiv.offsetTop;

        document.onmousemove = function(e){
            var e = e || window.event;
            // 横轴坐标
            var leftX = e.clientX - disX;
            // 纵轴坐标
            var topY =e.clientY - disY;

            if( leftX < 0 ){
                leftX = 0;
            }
            /* 获取浏览器视口大小 document.document.documentElement.clientWidth*/
            else if(  leftX > document.documentElement.clientWidth - oDiv.offsetWidth ){
                leftX = document.document.documentElement.clientWidth - oDiv.offsetWidth;
            }

            if( topY < 0 ){
                topY = 0;
            }
            else if( topY > document.documentElement.clientHeight -oDiv.offsetHeight ){
                topY = document.documentElement.clientHeight - oDiv.offsetHeight;
            }
            oDiv.style.left = leftX + "px";
            oDiv.style.top = topY+"px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
 }

乌鲁托拉曼

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现拖拽事件

HTML&lt;body&gt; &lt;div&gt;&lt;/div&gt;&lt;/body&gt;CSSdiv{ position: absolute; width: 200px; height: 200px; background: #369 }JSwindow....
复制链接

扫一扫

专栏目录