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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Webpack的dll功能使用
Jun 28 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP4实际应用经验篇(7)
2006/10/09 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
《Python学习手册》学习总结
2018/01/17 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python 实现aes256加密
2020/11/27 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
委托书如何写
2014/08/30 职场文书
学习经验交流会总结
2015/11/02 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
python实现局部图像放大
2021/11/17 Python