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 入门讲解1
Apr 15 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
微信小程序入门之指南针
Oct 22 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-Redis安装测试笔记
2015/03/05 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript几个易错点记录
2014/11/26 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
详解python读取image
2019/04/03 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python中uuid模块实例浅析
2020/12/29 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
经典c++面试题六
2012/01/18 面试题
销售工作岗位职责
2013/12/24 职场文书
洗发露广告词
2014/03/14 职场文书
听课评语大全
2014/04/30 职场文书
感恩的演讲稿
2014/05/06 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
公司安全管理制度范本
2015/08/05 职场文书
python基础之爬虫入门
2021/05/10 Python