介绍模态。缺省值={
背景:没错,
键盘:没错,
显示:真
}//新加入的拖拽
Modal.prototype。可拖动的=function () {
var避署=Ｃ涝?
var mouseOffset;
var modalDialog=ele.find美元(“.modal-dialog");
var dialogOffset;
美元ele.find (“.modal-header")内(& # 39;mousedown& # 39;函数(事件){
(美元)。addClass({光标:& # 39;行动# 39;});
美元(& # 39;身体# 39;).addClass(& # 39;选择# 39;);
dialogOffset=$ modalDialog.offset ();
mouseOffset={
上图:事件。pageY dialogOffset.top,
左:事件。pageX——dialogOffset.left
};
美元(& # 39;身体# 39;)。(“mousemove",函数(事件){
var=事件。pageX - mouseOffset.left;
var=事件。pageY - mouseOffset.top;
如果(左& lt;10){
左=0;
}else if(左比;$(窗口).width()——美元modalDialog.width ()) {
左=$(窗口).width modalDialog.width美元(),();
}
如果(最高& lt;10){
顶级=0;
}else if(上比;$(窗口).height()——美元modalDialog.height ()) {=$(窗口).height()——美元modalDialog.height ();
}
美元modalDialog.offset ({
上图:,
左:左
});
});
});
$(文档)。(“mouseup mouseleave",函数(){
美元(& # 39;身体# 39;).off (“mousemove");
});
} Modal.prototype。显示=function (_relatedTarget) {
var=这
var e=$ .Event (& # 39; show.bs.modal& # 39;, {relatedTarget: _relatedTarget})
美元。element.trigger (e)
如果这一点。isShown | | e.isDefaultPrevented ())
这一点。isShown=true//调可拖放()用增加拖拽
this.draggable ()
this.checkScrollbar ()
this.setScrollbar ()
美元。body.addClass (& # 39; modal-open& # 39;)
this.escape ()
this.resize ()//÷?
}
这篇文章主要介绍了引导拖拽组件的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>步骤(基于3.3.4或更高的3. x版本):
1。打开bootstrap.js源代码找到模态组件代码块,在模态。违约代码块下加入拖拽代码实现。
2。在模态的显示方法中添加调用可拖动的方法
完成上面的操作后直接引入刚刚修改的源码js在页面就已经能够很好的支持拖拽了,而且整个拖拽是在可视窗口范围内,不会超出边界。
注意事项:完成上面的源码修改后最好将引导的源码压缩打包,不熟悉自动构建的可以放到开放的网站压缩,熟悉自动化构建的最好使用杯,webpack这样的前端自动化工具来打包压缩源代码减少网页加载过程中占用带宽。当然也建议将文件命名为bootstrap-draggable.min.js类似的名称,方便一目了然的猜到这文件与原始文件有何不同。除此之外你也可以直接下载bootstrap3.x版本的源代码,然后修改里面的模态。js,然后使用它自身繁重构建来重新打包。
问题引深:引导4.0 +的版本源码和3。x的版本相比模态组件的修改并不很大,同样可以采取上面的方式。包括让模态居中也可修改源代码来完成。
感谢你能够认真阅读完这篇文章,希望小编分享引导拖拽组件的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
