详解为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 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python实现udp传输图片功能
2020/03/20 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
比赛主持人开场白
2015/05/29 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Linux安装Docker详细教程
2022/07/07 Servers