bootstrap模态框实现相对定位拖拽

1、正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果。

$(".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;
    });
});

当然,没有做限定,想怎么脱就怎么脱,,,哦不,是拖、、、拖,不是你想的那样的,好吧,就是你想的那样。

转载于:https://www.cnblogs.com/zhengshize/p/8510491.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值