您好,登錄后才能下訂單哦!
網(wǎng)上有許多給Bootstrap Modal添加拖拽實(shí)現(xiàn),但是許多代碼看起來(lái)都比較復(fù)雜感覺封裝性可能也不太好,有的甚至使用了jquery ui的拖拽功能,這些都不是我想要的,其實(shí)我在給Bootstrap Modal添加拖拽功能的事情已經(jīng)是2017年春節(jié)的時(shí)候了,彈指一揮間一年就過(guò)去了。2017年春節(jié)的時(shí)候,由于之前項(xiàng)目有同事使用layer來(lái)做前端,但是對(duì)于我這種略懂js前端的后端開發(fā)來(lái)說(shuō),讓我引入layer和layui的一整套東西是艱難的,曾經(jīng)大致的瀏覽過(guò)layui的一些組件,發(fā)現(xiàn)組件功能不是很完備,可以預(yù)見的是稍微復(fù)雜點(diǎn)的項(xiàng)目后期就會(huì)帶來(lái)很多坑。因此當(dāng)時(shí)就使用了bootstrap去作為前端的css框架,也大量使用modal這樣的組件來(lái)做彈出窗口。
步驟(基于3.3.4或更高的3.x版本):
1.打開bootstrap.js源代碼找到modal組件代碼塊,在Modal.DEFAULTS代碼塊下加入拖拽代碼實(shí)現(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在頁(yè)面就已經(jīng)能夠很好的支持拖拽了,而且整個(gè)拖拽是在可視窗口范圍內(nèi),不會(huì)超出邊界。
注意事項(xiàng):完成上面的源碼修改后最好將bootstrap的源碼壓縮打包,不熟悉自動(dòng)構(gòu)建的可以放到開放的網(wǎng)站壓縮,熟悉自動(dòng)化構(gòu)建的最好使用gulp、webpack這樣的前端自動(dòng)化工具來(lái)打包壓縮源代碼減少網(wǎng)頁(yè)加載過(guò)程中占用帶寬。當(dāng)然也建議將文件命名為bootstrap-draggable.min.js類似的名稱,方便一目了然的猜到這文件與原始文件有何不同。除此之外你也可以直接下載bootstrap3.x版本的源代碼,然后修改里面的modal.js,然后使用它自身grunt構(gòu)建來(lái)重新打包。
問(wèn)題引深:bootstrap 4.0+的版本源碼和3.x的版本相比modal組件的修改并不很大,同樣可以采取上面的方式。包括讓modal居中也可修改源代碼來(lái)完成。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。