js实现模态框的拖曳功能

Posted EngineerWen的技术博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现模态框的拖曳功能相关的知识,希望对你有一定的参考价值。

项目中需要对模态框进行拖曳,以便对比模态框和页面中的元素,现demo如下:

  1 <!-- saved from url=(0066)https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html -->
  2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3             
  4         <script src="./bs-modal-dragable_files/jquery.js"></script>
  5         <script src="./bs-modal-dragable_files/bootstrap.js"></script>
  6         <link rel="stylesheet" type="text/css" href="./bs-modal-dragable_files/bootstrap.css">
  7         <style type="text/css">
  8             .select{
  9                 -moz-user-select:none;/*火狐*/
 10                 -webkit-user-select:none;/*webkit浏览器*/
 11                 -ms-user-select:none;/*IE10*/
 12                 -khtml-user-select:none;/*早期浏览器*/
 13                 user-select:none;
 14                 }
 15               .modal-header{
 16                 cursor:move;
 17               }
 18         </style>
 19     </head>
 20     <body class="">
 21         <div class="container-fluid">
 22             <!-- Button trigger modal -->
 23             <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 24               Launch demo modal
 25             </button>
 26 
 27 
 28             <!-- Modal -->
 29             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
 30               <div class="modal-dialog" style="top: 0px; left: 0px;">
 31                 <div class="modal-content">
 32                   <div class="modal-header">
 33                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 34                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 35                   </div>
 36                   <div class="modal-body">
 37                     this is the modal-body areas
 38                   </div>
 39                   <div class="modal-footer">
 40                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 41                     <button type="button" class="btn btn-primary">Save changes</button>
 42                   </div>
 43                 </div>
 44               </div>
 45             </div>
 46         </div>
 47         
 48     
 49     <script>
 50 
 51         /** 拖拽模态框*/ 
 52         var dragModal={
 53             mouseStartPoint:{"left":0,"top":  0},
 54             mouseEndPoint : {"left":0,"top":  0},
 55             mouseDragDown : false,
 56             basePoint : {"left":0,"top":  0},
 57             moveTarget:null,
 58             topleng:0
 59         }
 60         $(document).on("mousedown",".modal-header",function(e){
 61             //webkit内核和火狐禁止文字被选中
 62             $(‘body‘).addClass(‘select‘)
 63             //ie浏览器禁止文字选中
 64             document.body.onselectstart=document.body.ondrag=function(){
 65                 return false;
 66                 }
 67             if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框  
 68                 return;  
 69             dragModal.mouseDragDown = true;  
 70             dragModal.moveTarget = $(this).parent().parent();         
 71             dragModal.mouseStartPoint = {"left":e.clientX,"top":  e.pageY};  
 72             dragModal.basePoint = dragModal.moveTarget.offset();  
 73             dragModal.topLeng=e.pageY-e.clientY;
 74         });  
 75         $(document).on("mouseup",function(e){       
 76             dragModal.mouseDragDown = false;  
 77             dragModal.moveTarget = undefined;  
 78             dragModal.mouseStartPoint = {"left":0,"top":  0};  
 79             dragModal.basePoint = {"left":0,"top":  0};  
 80         });  
 81         $(document).on("mousemove",function(e){  
 82             if(!dragModal.mouseDragDown || dragModal.moveTarget == undefined)return;          
 83             var mousX = e.clientX;  
 84             var mousY = e.pageY;  
 85             if(mousX < 0)mousX = 0;  
 86             if(mousY < 0)mousY = 25;  
 87             dragModal.mouseEndPoint = {"left":mousX,"top": mousY};  
 88             var width = dragModal.moveTarget.width();  
 89             var height = dragModal.moveTarget.height();
 90             var clientWidth=document.body.clientWidth
 91             var clientHeight=document.body.clientHeight;
 92             if(dragModal.mouseEndPoint.left<dragModal.mouseStartPoint.left - dragModal.basePoint.left){
 93                 dragModal.mouseEndPoint.left=0;
 94             }
 95             else if(dragModal.mouseEndPoint.left>=clientWidth-width+dragModal.mouseStartPoint.left - dragModal.basePoint.left){
 96                 dragModal.mouseEndPoint.left=clientWidth-width-38;
 97             }else{
 98                 dragModal.mouseEndPoint.left =dragModal.mouseEndPoint.left-(dragModal.mouseStartPoint.left - dragModal.basePoint.left);//移动修正,更平滑  
 99                 
100             }
101             if(dragModal.mouseEndPoint.top-(dragModal.mouseStartPoint.top - dragModal.basePoint.top)<dragModal.topLeng){
102                 dragModal.mouseEndPoint.top=dragModal.topLeng;
103             }else if(dragModal.mouseEndPoint.top-dragModal.topLeng>clientHeight-height+dragModal.mouseStartPoint.top - dragModal.basePoint.top){
104                 dragModal.mouseEndPoint.top=clientHeight-height-38+dragModal.topLeng;
105             }
106             else{
107                 dragModal.mouseEndPoint.top = dragModal.mouseEndPoint.top - (dragModal.mouseStartPoint.top - dragModal.basePoint.top);           
108             }
109             dragModal.moveTarget.offset(dragModal.mouseEndPoint);  
110         });   
111         $(document).on(‘hidden.bs.modal‘,‘.modal‘,function(e){
112             $(‘.modal-dialog‘).css({‘top‘: ‘0px‘,‘left‘: ‘0px‘})
113             $(‘body‘).removeClass(‘select‘)
114             document.body.onselectstart=document.body.ondrag=null;
115         })
116     </script>
117 </body></html>

 

以上是关于js实现模态框的拖曳功能的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap模态框的使用

bootstrap的模态框的使用

sortable.js 实现两个不同的表格之间表格行的拖曳的功能

使用jQuery将多条数据插入模态框的实现代码

js再谈移动端的模态框实现

bootstrap 模态框 每天自动弹出一次怎么实现