移动端：div在⼿机页⾯上随意拖动
1<!doctype html>
2<html>
3<head>
4<title>弹窗</title>
5<meta charset="utf-8">
6<script type="text/javascript" src="code.jquery/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(){
34var cont=$("#barrage");
35var contW=$("#barrage").width();
36var contH=$("#barrage").height();
37var startX,startY,sX,sY,moveX,moveY;
38var winW=$(window).width();
39var winH=$(window).height();
40var barrage_name=$("#barrage_name");
41var barrage_frame=$("#barrage_frame");
42var body=$("body");
43
44
45 ({//绑定事件
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 iginalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
61 iginalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
62//console.log("moveX="+moveX+"************moveY="+moveY);
63if(moveX<leftX){moveX=leftX;}
64if(moveX>rightX){moveX=rightX;}
65if(moveY<topY){moveY=topY;}
66if(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和移动端，想出了以下办法：
拖动时候⽤到的三个事件： mousedown 、 mousemove 、 mouseup 在移动端都不起任何作⽤。毕竟移动端是没有⿏标的，查资料后发现，在移动端与之相对应的分别是： touchstart 、 touchmove 、 touchend 事件。还有⼀点要注意的是在PC端获取当前⿏标的坐标
是： event.clientX 和 event.clientY ，在移动端获取坐标位置则是： uches[0].clientX 和 uches[0].clientY 。下⾯就来说说怎么实现这个效果吧，先看⼀下效果：
jquery弹出div窗口PC端：
移动端：
先来分析⼀个拖动的流程，以PC端为例，⾸先是⿏标按下（ mousedown 事件），然后移动（ mousemove 事件），最后释放⿏标
（ mouseup 事件），⾸先要设置⼀个变量记录⿏标是否按下，在⿏标按下的时候，我们做⼀个标记，然后需要记录⼀下⿏标当前的坐标，还有这个div当前的偏移量，当⿏标开始移动的时候，记录下⿏标当前的坐标，⽤⿏标当前的坐标减去⿏标按下时的坐标再加上⿏标按下时div的偏移量就是现在div距离⽗辈元素的距离，当⿏标释放的时候将标记改为⿏标已经释放。下⾯来看⼀下代码：
1var flag = false; //是否按下⿏标的标记
2var cur = { //记录⿏标按下时的坐标
3 x:0,
4 y:0
5 }
6var nx,ny,dx,dy,x,y ;
7//⿏标按下时的函数
8function 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//⿏标移动时的函数
16function move(){
17if(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 p = y +"px";
24 }
25 }
26//⿏标释放时候的函数
27function end(){
28 flag = false; //⿏标释放
29 }
然后在将事件加⼊到这个div中即可，下⾯再来看⼀个在移动端需要做些什么，⾸先是事件不同，只需要在添加移动端的 touchatart 、
touchmove 、 touchend 就可以了，还有⼀个不同的时移动端获取坐标是 uches[0].clientX 和 uches[0].clientY ，这也很简单，只要加上判断就可以了，如果是PC端就使⽤event，如果是移动端就使⽤ uches ：
1var touch ;
uches){
3 touch = uches[0];
4 }else {
5 touch = event;
6 }
还有⼀点要注意，在移动端拖动div的时候移动端的页⾯会⾃动产⽣滑动效果，所以还需要在 touchmove 的是给页⾯添加⼀个阻⽌默认事件的函数。
下⾯是整个代码，可以在Chrome下模拟移动端，点击：
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>
25var flag = false;
26var cur = {
27 x:0,
28 y:0
29 }
30var nx,ny,dx,dy,x,y ;
31function down(){
32 flag = true;
33var touch ;
uches){
35 touch = uches[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 }
44function move(){
45if(flag){
46var touch ;
uches){
48 touch = uches[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 p = y +"px";
58//阻⽌页⾯的滑动默认事件
59 document.addEventListener("touchmove",function(){
60 event.preventDefault();
61 },false);
62 }
63 }
64//⿏标释放时候的函数
65function end(){
66 flag = false;
67 }
68var div2 = ElementById("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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论