详解为Bootstrap Modal添加拖拽的方法


Posted in Javascript onJanuary 05, 2018

网上有许多给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居中也可修改源代码来完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
JavaScript this 深入理解
Jul 30 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 #Javascript
Vue组件的使用教程详解
Jan 05 #Javascript
基于three.js编写的一个项目类示例代码
Jan 05 #Javascript
js中this对象用法分析
Jan 05 #Javascript
Node中使用ES6语法的基础教程
Jan 05 #Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python argparser的具体使用
2019/11/10 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
公司活动邀请函
2014/01/24 职场文书
工业设计专业自荐书
2014/06/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
python库sklearn常用操作
2021/08/23 Python
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis