1、到官网下载-基于3.3.4或更高的3.x版本的bootstrap.js
2、打开bootstrap.js源代码找到modal组件代码块:Modal.DEFAULTS = {backdrop: true,keyboard: true,show: true}.....................................................................................................
3、在代码中加入：Modal.DEFAULTS = {backdrop: true,keyboard: true荑樊综鲶,show: true}//新加入的拖拽Modal.prototype.draggable = function () {var $ele = this.$element;var mouseOffset;var $modalDialog = $ele.find(".modal-dialog");var dialogOffset;$ele.find(".modal-header").on('mousedown', function (event) {$(this).addClass({cursor: 'move'});$('body').addClass('select');dialogOffset = $modalDialog.offset();mouseOffset = {top: event.pageY - dialogOffset.top,left: event.pageX - dialogOffset.left};$('body').on("mousemove", function (event) {var left = event.pageX - mouseOffset.left;var top = event.pageY - mouseOffset.top;if (left < 10) {left = 0;} else if (left > $(window).width() - $modalDialog.width()) {left = $(window).width() - $modalDialog.width();}if (top < 10) {top = 0;} else if (top > $(window).height() - $modalDialog.height()) {top = $(window).height() - $modalDialog.height();}$modalDialog.offset({top: top,left: left});});});$(document).on("mouseup mouseleave", function () {$('body').off("mousemove");});}
4、在modal的show方法中添加调用draggable方法代码如下：Modal.prototype.show = function (忧溲枷茫_relatedTarget) {var that = thisvar e = $.Event('show.bs.modal', {relatedTarget: _relatedTarget})this.$element.trigger(e)if (this.isShown || e.isDefaultPrevented()) returnthis.isShown = true//调用draggable()增加拖拽this.draggable()this.checkScrollbar()this.setScrollbar()this.$body.addClass('modal-open')this.escape()this.resize()//......省略}
5、完成上面的操作后直接引入刚刚修改的源码js在页面就已经能够很好的支持拖拽了，而且整个拖拽是在可视窗口范围内，不会超出边界。
