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事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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 模拟$_PUT实现代码
2010/03/15 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
python flask实现分页效果
2017/06/27 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
爱护草坪标语
2014/06/24 职场文书
酒桌上的开场白
2015/06/01 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang