廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
(function(){ function moveModal($this){ var $head = $this.find('.modal-header'); var $dialog = $this.find('.modal-dialog'); var move = { isMove: false, left: 0, top: 0 }; //委托 console.log('點擊的是',$this); $this.on('mousemove', function(e){ if(!move.isMove) return; console.log('移動的是', e.target); $dialog.offset({ top: e.pageY - move.top, left: e.pageX - move.left }); }).on('mouseup', function(e){ move.isMove = false; }); $head.on('mousedown', function(e){ move.isMove = true; var offset = $dialog.offset(); move.left = e.pageX - offset.left; move.top = e.pageY - offset.top; }); } var oldModal = $.fn.modal; $.fn.modal = function(o, _r){ var $this = $(this); if(!$this.attr('ifbindmv')){ $this.attr('isbindmv','1'); moveModal($this); } return oldModal.call(this, o, _r); } ////要拖動的div背景 //$('#showErr').modal({backdrop: 'static'});})();
以上所述是小編給大家介紹的Bootstrap的modal拖動效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答