首页 > 建站教程 > JS、jQ、TS >  bootstrap5 模态框实现拖拽功能正文

bootstrap5 模态框实现拖拽功能

bootstrap5 的模态框不支持拖拽,这里给它实现拖拽功能,代码如下:

$(".modal .modal-header").mousedown(function(e) {
    var isDrag = false;//是否可以拖拽
    var ev = e || window.event;
    var ol = $(this).offset().left;//盒子最左边 距离 窗口最左边 的距离
    var ot = $(this).offset().top;
    var l = $(this).parent().css("left");
    var t = $(this).parent().css("top");
    deltaX = ev.pageX - parseInt(l);//鼠标 距离 盒子最左边 的距离
    deltaY = ev.pageY - parseInt(t);
    isDrag = true;
    var _this = $(this).parent();
    $(document).mousemove(function(e) {
        var ev = e || window.event;
        if (isDrag) {
            moveL = ev.pageX - deltaX;
            moveT = ev.pageY - deltaY;
            _this.css({
                "left": moveL,
                "top": moveT
            });
        }
    });
    $(document).mouseup(function() {
        isDrag = false;
    });
});


当然,直接设置css就可以了,是因为模态框默认就是定位的。

此拖拽没有实现边缘限制,可以自己加个判断。