bootstrap模态框实现相对定位拖拽
程序员文章站
2022-06-22 13:02:18
1、正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果。 当然,没有做限定,想怎么脱就怎么脱,,,哦不,是拖、、、拖,不是你想的那样的,好吧,就是你想的那样。 可是判断限制了一下发现还有问题,拖着拖着就跑 ......
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; }); });
当然,没有做限定,想怎么脱就怎么脱,,,哦不,是拖、、、拖,不是你想的那样的,好吧,就是你想的那样。
可是判断限制了一下发现还有问题,拖着拖着就跑偏了,暂时还没解决,以后有时间再来研究。