移動端：div在手機頁面上隨意拖動

時間 2019-11-11

標籤移動 div 手機頁面隨意拖動欄目無線简体版

原文原文鏈接

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>彈窗</title>
 5         <meta charset="utf-8">
 6         <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 7         <style>
 8             body{margin:0;padding:0;}
 9             .barrage{position:fixed;display:block;top:0;}
10             .barrage_name{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#f00), to(#0f0));border-radius:50%;}
11             .barrage_name_hover{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#ff0), to(#00f));border-radius:50%;}
12             .col1{color:#fff;display: block;padding: 17px;text-align: center;}            
13         </style>     
14     </head>
15     <body>
16         <div class="barrage" id="barrage">        
17             <div class="barrage_name" id="barrage_name">
18                 <span class="col1">打開彈幕</span>            
19             </div>                   
20         </div>
21         <div>
22         <p>我是來打醬油的</p>
23         <p>我是來打醬油的</p>
24         <p>我是來打醬油的</p>
25         <p>我是來打醬油的</p>
26         <p>我是來打醬油的</p>
27         <p>我是來打醬油的</p>
28         <p>我是來打醬油的</p>
29         <p>我是來打醬油的</p>           
30         </div>
31     </body>
32     <script type="text/javascript">
33     $(function(){
34         var cont=$("#barrage");    
35         var contW=$("#barrage").width();
36         var contH=$("#barrage").height();            
37         var startX,startY,sX,sY,moveX,moveY;        
38         var winW=$(window).width();    
39         var winH=$(window).height();
40         var barrage_name=$("#barrage_name");
41         var barrage_frame=$("#barrage_frame");
42         var body=$("body");
43         
44         
45         cont.on({//綁定事件
46             touchstart:function(e){                
47                 startX = e.originalEvent.targetTouches[0].pageX;    //獲取點擊點的X座標    
48                 startY = e.originalEvent.targetTouches[0].pageY;    //獲取點擊點的Y座標
49                 //console.log("startX="+startX+"************startY="+startY);
50                 sX=$(this).offset().left;//相對於當前窗口X軸的偏移量
51                 sY=$(this).offset().top;//相對於當前窗口Y軸的偏移量
52                 //console.log("sX="+sX+"***************sY="+sY);
53                 leftX=startX-sX;//鼠標所能移動的最左端是當前鼠標距div左邊距的位置
54                 rightX=winW-contW+leftX;//鼠標所能移動的最右端是當前窗口距離減去鼠標距div最右端位置
55                 topY=startY-sY;//鼠標所能移動最上端是當前鼠標距div上邊距的位置
56                 bottomY=winH-contH+topY;//鼠標所能移動最下端是當前窗口距離減去鼠標距div最下端位置                
57                 },
58             touchmove:function(e){                
59                 e.preventDefault();
60                 moveX=e.originalEvent.targetTouches[0].pageX;//移動過程當中X軸的座標
61                 moveY=e.originalEvent.targetTouches[0].pageY;//移動過程當中Y軸的座標
62                 //console.log("moveX="+moveX+"************moveY="+moveY);
63                 if(moveX<leftX){moveX=leftX;}                                
64                 if(moveX>rightX){moveX=rightX;}
65                 if(moveY<topY){moveY=topY;}
66                 if(moveY>bottomY){moveY=bottomY;}
67                 $(this).css({
68                     "left":moveX+sX-startX,
69                     "top":moveY+sY-startY,                    
70                     })
71                 },
72             
73         })
74         
75         })
76     </script>
77 </html>

爲了兼容PC和移動端，想出瞭如下辦法：javascript

拖動時候用到的三個事件： mousedown 、 mousemove 、 mouseup 在移動端都不起任何做用。畢竟移動端是沒有鼠標的，查資料後發現，在移動端與之相對應的分別是： touchstart 、 touchmove 、 touchend 事件。還有一點要注意的是在PC端獲取當前鼠標的座標是： event.clientX 和 event.clientY ，在移動端獲取座標位置則是： event.touches[0].clientX 和 event.touches[0].clientY 。下面就來講說怎麼實現這個效果吧，先看一下效果：css

PC端：html

移動端：java

先來分析一個拖動的流程，以PC端爲例，首先是鼠標按下（ mousedown 事件），而後移動（ mousemove 事件），最後釋放鼠標（ mouseup 事件），首先要設置一個變量記錄鼠標是否按下，在鼠標按下的時候，咱們作一個標記，而後須要記錄一下鼠標當前的座標，還有這個div當前的偏移量，當鼠標開始移動的時候，記錄下鼠標當前的座標，用鼠標當前的座標減去鼠標按下時的座標再加上鼠標按下時div的偏移量就是如今div距離父輩元素的距離，當鼠標釋放的時候將標記改成鼠標已經釋放。下面來看一下代碼：jquery

 1 var flag = false;       //是否按下鼠標的標記
 2 var cur = {             //記錄鼠標按下時的座標
 3     x:0,
 4     y:0
 5 }
 6 var nx,ny,dx,dy,x,y ;
 7 //鼠標按下時的函數
 8 function down(){
 9     flag = true;             //確認鼠標按下
10     cur.x = event.clientX;   //記錄當前鼠標的x座標
11     cur.y = event.clientY;   //記錄當前鼠標的y座標
12     dx = div2.offsetLeft;    //記錄div當時的左偏移量
13     dy = div2.offsetTop;     //記錄div的上偏移量
14 }
15 //鼠標移動時的函數
16 function move(){
17     if(flag){                        //若是是鼠標按下則繼續執行
18         nx = event.clientX - cur.x;  //記錄鼠標在x軸移動的數據
19         ny = event.clientY - cur.y;  //記錄鼠標在y軸移動的數據
20         x = dx+nx;                   //div在x軸的偏移量加上鼠標在x軸移動的距離
21         y = dy+ny;                   //div在y軸的偏移量加上鼠標在y軸移動的距離
22         div2.style.left = x+"px";
23         div2.style.top = y +"px";
24     }
25 }
26 //鼠標釋放時候的函數
27 function end(){
28     flag = false;                    //鼠標釋放
29 }

而後在將事件加入到這個div中便可，下面再來看一個在移動端須要作些什麼，首先是事件不一樣，只須要在添加移動端的 touchatart 、 touchmove 、 touchend 就能夠了，還有一個不一樣的時移動端獲取座標是 event.touches[0].clientX 和 event.touches[0].clientY ，這也很簡單，只要加上判斷就能夠了，若是是PC端就使用event，若是是移動端就使用 event.touches ：git

1 var touch ;
2 if(event.touches){
3     touch = event.touches[0];
4 }else {
5     touch = event;
6 }

還有一點要注意，在移動端拖動div的時候移動端的頁面會自動產生滑動效果，因此還須要在 touchmove 的是給頁面添加一個阻止默認事件的函數。github

下面是整個代碼，能夠在Chrome下模擬移動端測試，點擊這裏查看：web

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>適配移動端的拖動效果</title>
 6     <style>
 7         #div1{
 8             height: 1000px;
 9         }
10         #div2{
11             position: absolute;
12             top:0;
13             left:0;
14             width: 100px;
15             height: 100px;
16             background: #bbbbbb;
17         }
18     </style>
19 </head>
20 <body>
21 <div id="div1">
22     <div id="div2"></div>
23 </div>
24 <script>
25     var flag = false;
26     var cur = {
27         x:0,
28         y:0
29     }
30     var nx,ny,dx,dy,x,y ;
31     function down(){
32         flag = true;
33         var touch ;
34         if(event.touches){
35             touch = event.touches[0];
36         }else {
37             touch = event;
38         }
39         cur.x = touch.clientX;
40         cur.y = touch.clientY;
41         dx = div2.offsetLeft;
42         dy = div2.offsetTop;
43     }
44     function move(){
45         if(flag){
46             var touch ;
47             if(event.touches){
48                 touch = event.touches[0];
49             }else {
50                 touch = event;
51             }
52             nx = touch.clientX - cur.x;
53             ny = touch.clientY - cur.y;
54             x = dx+nx;
55             y = dy+ny;
56             div2.style.left = x+"px";
57             div2.style.top = y +"px";
58             //阻止頁面的滑動默認事件
59             document.addEventListener("touchmove",function(){
60                 event.preventDefault();
61             },false);
62         }
63     }
64     //鼠標釋放時候的函數
65     function end(){
66         flag = false;
67     }
68     var div2 = document.getElementById("div2");
69     div2.addEventListener("mousedown",function(){
70         down();
71     },false);
72     div2.addEventListener("touchstart",function(){
73         down();
74     },false)
75     div2.addEventListener("mousemove",function(){
76         move();
77     },false);
78     div2.addEventListener("touchmove",function(){
79         move();
80     },false)
81     document.body.addEventListener("mouseup",function(){
82         end();
83     },false);
84     div2.addEventListener("touchend",function(){
85         end();
86     },false);
87 </script>
88 </body>
89 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。