拖动DIV
链接:https://www.cnblogs.com/joyco773/p/6519668.html
移动端: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和移动端,想出了以下办法:
拖动时候用到的三个事件: mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是: touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是: event.clientX 和 event.clientY ,在移动端获取坐标位置则是: event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧,先看一下效果:
PC端 :
移动端 :
先来分析一个拖动的流程,以PC端为例,首先是鼠标按下( mousedown 事件),然后移动( mousemove 事件),最后释放鼠标( mouseup 事件),首先要设置一个变量记录鼠标是否按下,在鼠标按下的时候,我们做一个标记,然后需要记录一下鼠标当前的坐标,还有这个div当前的偏移量,当鼠标开始移动的时候,记录下鼠标当前的坐标,用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离,当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码:
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 :
1 var touch ; 2 if(event.touches){ 3 touch = event.touches[0]; 4 }else { 5 touch = event; 6 }
还有一点要注意,在移动端拖动div的时候移动端的页面会自动产生滑动效果,所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。
下面是整个代码,可以在Chrome下模拟移动端测试,点击这里查看:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>适配移动端的拖动效果</title> <style> #div1{ height: 1000px; } #div2{ position: absolute; top:0; left:0; width: 100px; height: 100px; background: #bbbbbb; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> <script> var flag = false; var cur = { x:0, y:0 } var nx,ny,dx,dy,x,y ; function down(){ flag = true; var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } cur.x = touch.clientX; cur.y = touch.clientY; dx = div2.offsetLeft; dy = div2.offsetTop; } function move(){ if(flag){ var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } nx = touch.clientX - cur.x; ny = touch.clientY - cur.y; x = dx+nx; y = dy+ny; div2.style.left = x+"px"; div2.style.top = y +"px"; //阻止页面的滑动默认事件 document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } } //鼠标释放时候的函数 function end(){ flag = false; } var div2 = document.getElementById("div2"); div2.addEventListener("mousedown",function(){ down(); },false); div2.addEventListener("touchstart",function(){ down(); },false) div2.addEventListener("mousemove",function(){ move(); },false); div2.addEventListener("touchmove",function(){ move(); },false) document.body.addEventListener("mouseup",function(){ end(); },false); div2.addEventListener("touchend",function(){ end(); },false); </script> </body> </html>