詳解為Bootstrap Modal添加拖拽的方法
網(wǎng)上有許多給Bootstrap Modal添加拖拽實現(xiàn),但是許多代碼看起來都比較復(fù)雜感覺封裝性可能也不太好,有的甚至使用了jquery ui的拖拽功能,這些都不是我想要的,其實我在給Bootstrap Modal添加拖拽功能的事情已經(jīng)是2017年春節(jié)的時候了,彈指一揮間一年就過去了。2017年春節(jié)的時候,由于之前項目有同事使用layer來做前端,但是對于我這種略懂js前端的后端開發(fā)來說,讓我引入layer和layui的一整套東西是艱難的,曾經(jīng)大致的瀏覽過layui的一些組件,發(fā)現(xiàn)組件功能不是很完備,可以預(yù)見的是稍微復(fù)雜點的項目后期就會帶來很多坑。因此當(dāng)時就使用了bootstrap去作為前端的css框架,也大量使用modal這樣的組件來做彈出窗口。
步驟(基于3.3.4或更高的3.x版本):
1.打開bootstrap.js源代碼找到modal組件代碼塊,在Modal.DEFAULTS代碼塊下加入拖拽代碼實現(xiàn)。
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方法中添加調(diào)用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
//調(diào)用draggable()增加拖拽
this.draggable()
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
this.escape()
this.resize()
//......省略
}
完成上面的操作后直接引入剛剛修改的源碼js在頁面就已經(jīng)能夠很好的支持拖拽了,而且整個拖拽是在可視窗口范圍內(nèi),不會超出邊界。
注意事項:完成上面的源碼修改后最好將bootstrap的源碼壓縮打包,不熟悉自動構(gòu)建的可以放到開放的網(wǎng)站壓縮,熟悉自動化構(gòu)建的最好使用gulp、webpack這樣的前端自動化工具來打包壓縮源代碼減少網(wǎng)頁加載過程中占用帶寬。當(dāng)然也建議將文件命名為bootstrap-draggable.min.js類似的名稱,方便一目了然的猜到這文件與原始文件有何不同。除此之外你也可以直接下載bootstrap3.x版本的源代碼,然后修改里面的modal.js,然后使用它自身grunt構(gòu)建來重新打包。
問題引深:bootstrap 4.0+的版本源碼和3.x的版本相比modal組件的修改并不很大,同樣可以采取上面的方式。包括讓modal居中也可修改源代碼來完成。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- BootStrap table實現(xiàn)表格行拖拽效果
- 基于bootstrap的上傳插件fileinput實現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- .net core版 文件上傳/ 支持批量上傳拖拽及預(yù)覽功能(bootstrap fileinput上傳文件)
- bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果
- Bootstrap模態(tài)框水平垂直居中與增加拖拽功能
- JS組件Bootstrap Table表格多行拖拽效果實現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實現(xiàn)代碼
- BootStrap modal實現(xiàn)拖拽功能
相關(guān)文章
JavaScript實現(xiàn)旋轉(zhuǎn)輪播圖
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)旋轉(zhuǎn)輪播圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08
javascript 動態(tài)數(shù)據(jù)下的錨點錯位問題解決方法
用 Javascript 實現(xiàn)錨點(Anchor)間平滑跳轉(zhuǎn)2008-12-12
微信小程序購物商城系統(tǒng)開發(fā)系列-目錄結(jié)構(gòu)介紹
js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析

