详解为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 getElementsByClassName函数
Apr 01 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
vue实现动态按钮功能
May 13 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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
十大“创意”战术!
2020/03/04 星际争霸
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
详解Python中is和==的区别
2019/03/21 Python
Python上下文管理器全实例详解
2019/11/12 Python
python求绝对值的三种方法小结
2019/12/04 Python
python使用列表的最佳方案
2020/08/12 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
质检部职责
2013/12/28 职场文书
党员一句话承诺大全
2014/03/28 职场文书
投资合作协议书
2014/04/17 职场文书
党支部换届选举方案
2014/05/08 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
小学家长通知书评语
2014/12/31 职场文书
鸡毛信观后感
2015/06/11 职场文书
商场广播稿范文
2015/08/19 职场文书
会计做账心得体会
2016/01/22 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang