jquery实现一些小动画二

jquery实现拖拽功能

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <title>Document</title>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <link rel="stylesheet" href="./reset.css">
  9   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 10   <style>
 11     html,body{
 12       width:100%;
 13       height:100%;
 14     }
 15     .dialogmark{
 16       position:fixed;
 17       top:0;
 18       left:0;
 19       z-index:1000;
 20       width:100%;
 21       height:100%;
 22       background: rgba(0,0,0,0.3);
 23     }
 24     .dialogbox{
 25       position:fixed;
 26       width:300px;
 27       height:400px;
 28       z-index: 1001;
 29       background:#fff;
 30       overflow:hidden;
 31     }
 32     .dialogbox h3.title{
 33       height:35px;
 34       line-height:35px;
 35       padding: 0 10px;
 36       background: #DDD;
 37       cursor: move;
 38       position: relative;
 39       user-select: none;
 40     }
 41     .dialogbox h3 i {
 42       position: absolute;
 43       top:50%;
 44       right: 10px;
 45       margin-top: -10px;
 46       width: 20px;
 47       height: 20px;
 48       font-size: 16px;
 49       line-height: 20px;
 50       text-align: center;
 51       font-style: normal;
 52       cursor: pointer;
 53     }
 54   </style>
 55 </head>
 56 <body>
 57     <div class="dialogmark"></div>
 58     <div class="dialogbox">
 59       <h3 class="title">
 60         标题
 61         <i>X</i>
 62       </h3>
 63       <div class="content">
 64       </div>
 65     </div>
 66     <script>
 67       $(function(){
 68 
 69         /*
 70           拖拽的js实现
 71         */
 72         var $dialogmark = $(".dialogmark"),
 73             $dialogbox = $(".dialogbox"),
 74             $h1 = $dialogbox.children('.title'),
 75             $i = $h1.children('i'),
 76             HW = $("body").innerWidth(),
 77             HH = $("body").innerHeight(),
 78             boxW = $dialogbox.outerWidth(),
 79             boxH = $dialogbox.outerHeight();
 80 
 81         $i.click(function(){
 82           $dialogbox.hide(300)
 83         })
 84 
 85           //计算盒子位置
 86           var calPosition = function(){
 87             //获取当前窗口的大小
 88             $dialogbox.css({
 89               top:(HH - boxH)/2,
 90               left:(HW - boxW)/2
 91             })
 92           }
 93           calPosition()
 94           var dragstart = function(event){
 95             var mX = event.clientX,  //获取原始鼠标位置X位置
 96                 mY = event.clientY, //获取原始鼠标位置Y位置
 97                 boxSX = $dialogbox.position().left,
 98                 boxSY =$dialogbox.position().top;
 99               //这里可以利用传递参数，也可以给元素赋值自定义属性保存变量值
100             $(document).on("mousemove",{mX,mY,boxSX,boxSY},dragmove)
101           }
102           var dragmove = function(event){
103             var {mX,mY,boxSX,boxSY}= event.data,
104                 mMX = event.clientX,  //移动鼠标的当前X位置
105                 mMY = event.clientY,  //移动鼠标的当前Y位置
106                 mcX = mMX - mX,        //鼠标改变X位置
107                 mcY = mMY - mY,      //鼠标改变Y位置
108                 boxcX = boxSX + mcX,  //盒子需要改变的X位置
109                 boxcY = boxSY + mcY, //盒子需要改变的Y位置
110                 minL = 0,   //盒子最小移动X距离
111                 minT = 0,  //盒子最小移动Y距离
112                 maxL = HW - boxW,//盒子最大移动X距离
113                 maxT = HH - boxH;//盒子最大移动Y距离
114 
115               boxcX = boxcX < minL?minL:(boxcX>maxL?maxL:boxcX)  //X边界判断
116               boxcY = boxcY < minT?minT:(boxcY>maxT?maxT:boxcY)  //Y边界判断
117               $dialogbox.css({
118                 left:boxcX,
119                 top:boxcY
120               })
121           }
122           var dragend = function(){
123               //快速拖拽存在鼠标丢失焦点问题
124               $(document).off("mousemove",dragmove)
125           }
126           $h1.mousedown(dragstart)
127           $(document).mouseup(dragend)
128       })
View Code

 

效果图：

　　

 

注意：

　　拖拽中存在的问题：　　　　

　　　　在拖拽中存在一个问题，就是如果鼠标拖拽过快，盒子是需要计算罪行位置的，但是
　　　　计算速度跟不上鼠标的移动速度，导致鼠标离开了盒子，那么此时鼠标的任何事件都与盒子
　　　　无关了，即鼠标抬起不会触发接触绑定事件，鼠标移动也不会触发定义在盒子的鼠标移动事件

　　解决思路：　　　

　　　　1、使用setCapture与releaseCapture方法。注意google浏览器不支持这两个方法

　　　　　将鼠标与当前元素绑在一起，无论你移动多快，我都绑定在一起
　　　　 　　this.setCapture()
　　　　　将鼠标与当前元素解绑。与setCapture相反
　　　　　　 this.releaseCapture()
　　　  2、鼠标移动在快也脱离不了document即当前文档，因此，
 　　　　　　我们可以给document绑定mousemove方法，那么鼠标在文档中移动都会触发mosemove绑定的事件
　　　　　　　　注意：重新绑定document时，存在this指向（如果原本用了this）问题（解决思路：使用bind方法）