欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年12月14日 09:42:45   作者：咕咕雞5  
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

將上邊三個小問題解決以后，基本就可以用了。

拖動選中的時候，主流的webkit和火狐瀏覽器可以通過樣式來調(diào)整，而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
根據(jù)我們項目中的情況，讓他在content區(qū)域拖動，加了個碰撞檢測，即將區(qū)域的邊界根據(jù)實際情況來編寫。

下載demo自己調(diào)整 https://github.com/guguji5/bs-modal-dragable

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論