bootstrap模态框实现拖拽效果
更新时间：2016年12月14日 09:42:45 作者：咕咕鸡5
这篇文章主要为大家详细介绍了bootstrap模态框实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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区域拖动，加了个碰撞检测，即将区域的边界根据实际情况来编写。
下载demo自己调整 https://github.com/guguji5/bs-modal-dragable
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天学习了一个瀑布流加载效果，很多网站都有瀑布流效果，下面通过本文给大家分享利用JS实现简单的瀑布流加载图片效果，需要的朋友参考下吧2017-04-04
这篇文章主要介绍了JavaScript判断数组类型的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结40条常见的移动端Web页面问题解决方案,欢迎收看收藏!2016-05-05
这篇文章主要介绍了如何在js中引入less的变量,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
Javascript验证用户输入URL地址是否为空及格式是否正确
这篇文章主要介绍了Javascript验证用户输入URL地址是否为空及格式是否正确,很实用，需要的朋友可以参考下2014-10-10
这篇文章主要介绍了如何通过JavaScript动态修改元素的样式,三种方式分别是直接操作元素的style属性、通过classList属性添加或移除类名、以及使用CSSStyleDeclaration对象的setProperty方法,每种方法都有其适用场景,需要的朋友可以参考下2024-12-12
Bootstrap每天必学之按钮组工具栏，本文讲解的就是大家最为常用的按钮组工具栏，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了微信小程序中button去除默认的边框的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法2014-01-01
js完美解决IE6不支持position:fixed的bug
关于IE6，虽然它已被微软抛弃很久了，但是由于大天朝的特殊行情（盗版）对于前端工程师来说，解决IE6兼容position:fixed的问题显得很重要。特别是你需要用到头尾悬停调用的时候2015-04-04
最新评论