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 强制刷新页面的实现代码
Dec 13 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
JS文件中加载jquery.js的实例代码
May 05 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
程序员编程十条戒律
2009/07/09 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP检测用户语言的方法
2015/06/15 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
nodeJS微信分享
2017/12/20 NodeJs
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python列表与元组详解实例
2013/11/01 Python
python中的五种异常处理机制介绍
2014/09/02 Python
详解Python中的循环语句的用法
2015/04/09 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python实现简易版计算器
2020/06/22 Python
python 拼接文件路径的方法
2018/10/23 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
学生自我评语大全
2014/04/18 职场文书
建筑施工安全责任书
2014/07/24 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记