Bootstrap的modal拖动效果


Posted in Javascript onDecember 25, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

(function(){
  function moveModal($this){
    var $head = $this.find('.modal-header');
    var $dialog = $this.find('.modal-dialog');
    var move = {
      isMove: false,
      left: 0,
      top: 0
    };
    //委托
    console.log('点击的是',$this);
    $this.on('mousemove', function(e){
      if(!move.isMove) return;
      console.log('移动的是', e.target);
      $dialog.offset({
        top: e.pageY - move.top,
        left: e.pageX - move.left
      });
    }).on('mouseup', function(e){
      move.isMove = false;
    });
    $head.on('mousedown', function(e){
      move.isMove = true;
      var offset = $dialog.offset();
      move.left = e.pageX - offset.left;
      move.top = e.pageY - offset.top;
    });
  }
  var oldModal = $.fn.modal;
  $.fn.modal = function(o, _r){
    var $this = $(this);
    if(!$this.attr('ifbindmv')){
      $this.attr('isbindmv','1');
      moveModal($this);
    }
    return oldModal.call(this, o, _r);
  }
  ////要拖动的div背景
  //$('#showErr').modal({backdrop: 'static'});
})();

以上所述是小编给大家介绍的Bootstrap的modal拖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
使用javascript获取页面名称
Dec 23 Javascript
js验证框架实现代码分享
May 18 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
JS如何生成一个不重复的ID的函数
Dec 25 #Javascript
js Canvas实现的日历时钟案例分享
Dec 25 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
表单提交验证类
2006/07/14 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js运动应用实例解析
2015/12/28 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Three.JS实现三维场景
2018/12/30 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
python调用百度语音REST API
2018/08/30 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
《珍珠泉》教学反思
2014/02/20 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
辩论赛主持词
2014/03/18 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
求职信如何撰写?
2019/05/22 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python