弹出对话框拖拽JavaScript实现

最新推荐文章于 2024-04-01 17:14:57 发布

chengliang666

最新推荐文章于 2024-04-01 17:14:57 发布

阅读量644

点赞数

分类专栏： JavaScript 事件文章标签： JavaScript 对话框拖拽

本文为博主原创文章，转载请声明出处，谢谢！

本文链接：https://blog.youkuaiyun.com/chengliang666/article/details/79885827

版权

JavaScript 同时被 2 个专栏收录

28 篇文章

订阅专栏

事件

7 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的基本示例，演示如何使网页上的DIV元素可被鼠标拖动。通过设置CSS样式和JavaScript事件监听，实现了DIV元素在浏览器窗口内的自由移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<div id="box"></div>

css代码

  * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

JS代码

 var Box = document.getElementById("box");
    var iw = document.documentElement.clientWidth - Box.offsetWidth;
    Box.onmousedown = function (e) {
        var e = e || event;
        var disX = e.offsetX;
        var disY = e.offsetY;
        document.onmousemove = function (e) {
            var e = e || event;
            var l = e.clientX - disX;
            var t = e.clientY - disY;
            l = l >= iw ? l = iw : (l <= 0 ? l = 0 : l = l);
            t = t >= e.clientY ? t = e.clientY : (t <= 0 ? t = 0 : t = t);
            Box.style.left = l + "px";
            Box.style.top = t + "px";
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }