爲Bootstrap Modal添加拖拽

        網上有許多給Bootstrap Modal添加拖拽實現，可是許多代碼看起來都比較複雜感受封裝性可能也不太好，有的甚至使用了jquery ui的拖拽功能，這些都不是我想要的，其實我在給Bootstrap Modal添加拖拽功能的事情已是2017年春節的時候了，彈指一揮間一年就過去了。2017年春節的時候，因爲以前項目有同事使用layer來作前端，可是對於我這種略懂js前端的後端開發來講，讓我引入layer和layui的一整套東西是艱難的，曾經大體的瀏覽過layui的一些組件，發現組件功能不是很完備，能夠預見的是稍微複雜點的項目後期就會帶來不少坑。所以當時就使用了bootstrap去做爲前端的css框架，也大量使用modal這樣的組件來作彈出窗口。

步驟(基於3.3.4或更高的3.x版本)：

1.打開bootstrap.js源代碼找到modal組件代碼塊，在Modal.DEFAULTS代碼塊下加入拖拽代碼實現。

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

2. 在modal的show方法中添加調用draggable方法

Modal.prototype.show = function (_relatedTarget) {
        var that = this
        var e = $.Event('show.bs.modal', {relatedTarget: _relatedTarget})

        this.$element.trigger(e)

        if (this.isShown || e.isDefaultPrevented()) return

        this.isShown = true

        //調用draggable()增長拖拽
        this.draggable()
        this.checkScrollbar()
        this.setScrollbar()
        this.$body.addClass('modal-open')

        this.escape()
        this.resize()
        //......省略
}

完成上面的操做後直接引入剛剛修改的源碼js在頁面就已經可以很好的支持拖拽了，並且整個拖拽是在可視窗口範圍內，不會超出邊界。

注意事項：完成上面的源碼修改後最好將bootstrap的源碼壓縮打包，不熟悉自動構建的能夠放到開放的網站壓縮，熟悉自動化構建的最好使用gulp、webpack這樣的前端自動化工具來打包壓縮源代碼減小網頁加載過程當中佔用帶寬。固然也建議將文件命名爲bootstrap-draggable.min.js相似的名稱，方便一目瞭然的猜到這文件與原始文件有何不一樣。除此以外你也能夠直接下載bootstrap3.x版本的源代碼，而後修改裏面的modal.js，而後使用它自身grunt構建來從新打包。

問題引深：bootstrap 4.0+的版本源碼和3.x的版本相比modal組件的修改並不很大，一樣能夠採起上面的方式。包括讓modal居中也可修改源代碼來完成。

版權申明：以上代碼不作任何限制，可是轉載本博客內容請註明原地址