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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
ionic3 懒加载
Aug 16 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
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日期处理函数 整型日期格式
2011/01/12 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
js+html制作简单验证码
2017/02/16 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
复习Python中的字符串知识点
2015/04/14 Python
python绘制简单折线图代码示例
2017/12/19 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
大学生个人事迹材料
2014/01/21 职场文书
仓库主管岗位职责
2014/03/02 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
少先队工作总结2015
2015/05/13 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js