鼠标拖动弹出框移动的方法封装

遇到问题不要慌

已于 2022-08-12 10:28:54 修改

阅读量295

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-07-08 09:51:07 首次发布

本文链接：https://blog.csdn.net/zuo_kaizheng/article/details/125672071

版权

实现效果图

在这里插入图片描述

注意：按住鼠标左键可以拖动弹框，改变弹框显示位置

封装函数

function dragFunc(id) {
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};