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实现模态框的拖曳功能的主要内容，如果未能解决你的问题，请参考以下文章