详解为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 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
js实现可爱的气泡特效
Sep 05 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
Dedecms常用函数解析
2008/02/01 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js单例模式详解实例
2013/11/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python正则实现提取电话功能
2018/02/24 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
对于Python深浅拷贝的理解
2019/07/29 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
用python读取xlsx文件
2020/12/17 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
这段代码难道不该打印出56吗
2013/02/27 面试题
自我反省检讨书
2014/01/23 职场文书
大学军训感言1500字
2014/03/09 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
付款证明模板
2015/06/19 职场文书