快捷導(dǎo)航

bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果

更新時(shí)間：2016年12月14日 09:42:45 作者：咕咕雞5

這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，供大家參考，具體內(nèi)容如下

項(xiàng)目中用的有點(diǎn)亂，jquery和angularjs一起搞，有些插件用的jquery版本的，有的插件用的ng版本的。搞到現(xiàn)在測(cè)試了一輪又一輪，發(fā)現(xiàn)modal模態(tài)框有限bug，因?yàn)閷蛹?jí)的問(wèn)題，modal框會(huì)被左側(cè)菜單遮擋，需求就改成將modal框改成可以拖動(dòng)的。
網(wǎng)上搜了搜，找到個(gè)blog發(fā)現(xiàn)基本功能是可用的。但是效果不太友好。問(wèn)題有以下兩個(gè)

拖動(dòng)時(shí)候背后文字會(huì)被選中，很難看
modal模態(tài)框會(huì)被拖出邊框以外，很難看，而且可能拖不回來(lái)
modal可多動(dòng)但是鼠標(biāo)指針沒(méi)有任何的顯示，不友好

將上邊三個(gè)小問(wèn)題解決以后，基本就可以用了。

拖動(dòng)選中的時(shí)候，主流的webkit和火狐瀏覽器可以通過(guò)樣式來(lái)調(diào)整，而ie的瀏覽器用過(guò)一句簡(jiǎn)單的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;
 }

拖出瀏覽器邊界的問(wèn)題，可以增加碰撞檢驗(yàn)，再增加cursor：move的樣式，就比較像模像樣了。

在線demo https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html
根據(jù)我們項(xiàng)目中的情況，讓他在content區(qū)域拖動(dòng)，加了個(gè)碰撞檢測(cè)，即將區(qū)域的邊界根據(jù)實(shí)際情況來(lái)編寫。