用mouse事件写一个可拖拽的div

最新推荐文章于 2022-06-15 17:12:59 发布

我不是小白脸

最新推荐文章于 2022-06-15 17:12:59 发布

阅读量412

点赞数

分类专栏： javascript

原文链接：https://blog.csdn.net/github_38861674/article/details/77618957

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

<!DOCTYPE html>
<html>

<head>
    <title>用mouse事件写一个可拖拽的div</title>
    <style type="text/css">
        #div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>

<body>
    <p>
        <label for="refer"></label>
        <a id="refer" href="https://blog.csdn.net/github_38861674/article/details/77618957">用鼠标事件实现拖拽</a>
    </p>

    <div id="div1"></div>

    <script type="text/javascript">
        window.onload = function () {
            var moveBox = document.getElementById('div1');
            var windowH = window.innerHeight,
                windowW = window.innerWidth;
            // 当鼠标在moveBox里面按下时
            moveBox.onmousedown = function (event) {
                event = event || window.event;
                var distanceX = event.clientX - this.offsetLeft,
                    distanceY = event.clientY - this.offsetTop;
                // 当鼠标在document任意位置时，连续触发    
                document.onmousemove = function (event_2) {
                    event_2 = event_2 || window.event;
                    /*clientX,clientY鼠标的x，y坐标*/
                    var left = event_2.clientX - distanceX,
                        top = event_2.clientY - distanceY;
                    if (left < 0) left = 0;
                    if (top < 0) top = 0;
                    /*offsetWith,offsetHeight控件的高度，宽度*/
                    if (left > windowW - moveBox.offsetWidth) left = windowW - moveBox.offsetWidth;
                    if (top > windowH - moveBox.offsetHeight) top = windowH - moveBox.offsetHeight;
                    moveBox.style.left = left + 'px';
                    moveBox.style.top = top + 'px'
                    // 当鼠标离开时,移除鼠标移动事件；
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        }
    </script>

</body>

</html>

运行效果：
在这里插入图片描述

我不是小白脸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用mouse事件写一个可拖拽的div

文章目录<!DOCTYPE html><html><head> <title>用mouse事件写一个可拖拽的div</title> <style type="text/css"> #div1 { position: absolute; w...
复制链接

扫一扫

专栏目录