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下写一个事件队列操作函数
Jul 19 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
js实现滑动滑块验证登录
Jul 24 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
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python异常处理知识点总结
2019/02/18 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
师德个人剖析材料
2014/02/02 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫