bootstrap模态框实现拖拽效果


Posted in Javascript onDecember 14, 2016

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下

项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的。搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的。
网上搜了搜,找到个blog发现基本功能是可用的。但是效果不太友好。问题有以下两个

  • 拖动时候背后文字会被选中,很难看
  • modal模态框会被拖出边框以外,很难看,而且可能拖不回来
  • modal可多动但是鼠标指针没有任何的显示,不友好

将上边三个小问题解决以后,基本就可以用了。

拖动选中的时候,主流的webkit和火狐浏览器可以通过样式来调整,而ie的浏览器用过一句简单的js解决。

-moz-user-select:none;/*火狐*/
 -webkit-user-select:none;/*webkit浏览器*/
 -ms-user-select:none;/*IE10*/
 -khtml-user-select:none;/*早期浏览器*/
 user-select:none;
 //IE浏览器兼容
document.body.onselectstart=document.body.ondrag=function(){
 return false;
 }

拖出浏览器边界的问题,可以增加碰撞检验,再增加cursor:move的样式,就比较像模像样了。

在线demo https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html
根据我们项目中的情况,让他在content区域拖动,加了个碰撞检测,即将区域的边界根据实际情况来编写。

bootstrap模态框实现拖拽效果

下载demo自己调整 https://github.com/guguji5/bs-modal-dragable

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
老生常谈js数据类型
Aug 03 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 #Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 #Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 #Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 #Javascript
深入理解jquery中的each用法
Dec 14 #Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
图解javascript作用域链
2019/05/27 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python实现的knn算法示例
2018/06/14 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python模拟实现斗地主发牌
2020/01/07 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
存储过程和函数的区别
2013/05/28 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
Ruby如何定义一个类
2012/10/08 面试题
幼儿园家长评语
2014/02/10 职场文书
物流专业自荐信
2014/05/23 职场文书
医院护士工作检讨书
2014/10/26 职场文书
六年级学生期末评语
2014/12/26 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
人事任命通知书
2015/04/21 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
编写python程序的90条建议
2021/04/14 Python
浅析MongoDB之安全认证
2021/06/26 MongoDB
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
详解MySQL的内连接和外连接
2023/05/08 MySQL