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