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 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery动态添加
Apr 07 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python斐波那契数列的计算方法
2018/09/27 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python中元组的用法整理
2020/06/15 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
教师个人自我鉴定
2014/02/08 职场文书
个人课题方案
2014/05/08 职场文书
高中军训的心得体会
2014/09/01 职场文书
员工教育培训协议书
2014/09/27 职场文书
2014年纪委工作总结
2014/12/05 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python first-order-model实现让照片动起来
2022/06/25 Python