bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果
本文實例為大家分享了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，供大家參考，具體內(nèi)容如下
項目中用的有點亂，jquery和angularjs一起搞，有些插件用的jquery版本的，有的插件用的ng版本的。搞到現(xiàn)在測試了一輪又一輪，發(fā)現(xiàn)modal模態(tài)框有限bug，因為層級的問題，modal框會被左側菜單遮擋，需求就改成將modal框改成可以拖動的。
網(wǎng)上搜了搜，找到個blog發(fā)現(xiàn)基本功能是可用的。但是效果不太友好。問題有以下兩個
- 拖動時候背后文字會被選中，很難看
- modal模態(tài)框會被拖出邊框以外，很難看，而且可能拖不回來
- modal可多動但是鼠標指針沒有任何的顯示，不友好
將上邊三個小問題解決以后，基本就可以用了。
拖動選中的時候，主流的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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天學習了一個瀑布流加載效果，很多網(wǎng)站都有瀑布流效果，下面通過本文給大家分享利用JS實現(xiàn)簡單的瀑布流加載圖片效果，需要的朋友參考下吧2017-04-04
這篇文章主要介紹了JavaScript判斷數(shù)組類型的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
移動端Web需要照顧觸摸操作的體驗,以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問題,非?，嵥?在這里為大家傾力總結40條常見的移動端Web頁面問題解決方案,歡迎收看收藏!2016-05-05
這篇文章主要介紹了如何在js中引入less的變量,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
Javascript驗證用戶輸入URL地址是否為空及格式是否正確
這篇文章主要介紹了Javascript驗證用戶輸入URL地址是否為空及格式是否正確,很實用，需要的朋友可以參考下2014-10-10
一文詳解如何通過JavaScript動態(tài)修改元素的樣式
這篇文章主要介紹了如何通過JavaScript動態(tài)修改元素的樣式,三種方式分別是直接操作元素的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的問題顯得很重要。特別是你需要用到頭尾懸停調(diào)用的時候2015-04-04