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; }); });
當然,沒有做限定,想怎麼脫就怎麼脫,,,哦不,是拖、、、拖,不是你想的那樣的,好吧,就是你想的那樣。
可是判斷限制了一下發現還有問題,拖著拖著就跑偏了,暫時還沒解決,以後有時間再來研究。