移动端：div在手机页面上随意拖动

 <!doctype html>

 <html>

     <head>

         <title>弹窗</title>

         <meta charset="utf-8">

         <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

         <style>

             body{margin:0;padding:0;}

             .barrage{position:fixed;display:block;top:0;}

             .barrage_name{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#f00), to(#0f0));border-radius:50%;}

             .barrage_name_hover{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#ff0), to(#00f));border-radius:50%;}

             .col1{color:#fff;display: block;padding: 17px;text-align: center;}

         </style>

     </head>

     <body>

         <div class="barrage" id="barrage">

             <div class="barrage_name" id="barrage_name">

                 <span class="col1">打开弹幕</span>

             </div>

         </div>

         <div>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         <p>我是来打酱油的</p>

         </div>

     </body>

     <script type="text/javascript">

     $(function(){

         var cont=$("#barrage");

         var contW=$("#barrage").width();

         var contH=$("#barrage").height();

         var startX,startY,sX,sY,moveX,moveY;

         var winW=$(window).width();

         var winH=$(window).height();

         var barrage_name=$("#barrage_name");

         var barrage_frame=$("#barrage_frame");

         var body=$("body");

         cont.on({//绑定事件

             touchstart:function(e){

                 startX = e.originalEvent.targetTouches[0].pageX;    //获取点击点的X坐标

                 startY = e.originalEvent.targetTouches[0].pageY;    //获取点击点的Y坐标

                 //console.log("startX="+startX+"************startY="+startY);

                 sX=$(this).offset().left;//相对于当前窗口X轴的偏移量

                 sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量

                 //console.log("sX="+sX+"***************sY="+sY);

                 leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置

                 rightX=winW-contW+leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置

                 topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置

                 bottomY=winH-contH+topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置

                 },

             touchmove:function(e){

                 e.preventDefault();

                 moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标

                 moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标

                 //console.log("moveX="+moveX+"************moveY="+moveY);

                 if(moveX<leftX){moveX=leftX;}

                 if(moveX>rightX){moveX=rightX;}

                 if(moveY<topY){moveY=topY;}

                 if(moveY>bottomY){moveY=bottomY;}

                 $(this).css({

                     "left":moveX+sX-startX,

                     "top":moveY+sY-startY,

                     })

                 },

         })

         })

     </script>

 </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距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码：

 var flag = false;       //是否按下鼠标的标记

 var cur = {             //记录鼠标按下时的坐标

     x:0,

     y:0

 }

 var nx,ny,dx,dy,x,y ;

 //鼠标按下时的函数

 function down(){

     flag = true;             //确认鼠标按下

     cur.x = event.clientX;   //记录当前鼠标的x坐标

     cur.y = event.clientY;   //记录当前鼠标的y坐标

     dx = div2.offsetLeft;    //记录div当时的左偏移量

     dy = div2.offsetTop;     //记录div的上偏移量

 }

 //鼠标移动时的函数

 function move(){

     if(flag){                        //如果是鼠标按下则继续执行

         nx = event.clientX - cur.x;  //记录鼠标在x轴移动的数据

         ny = event.clientY - cur.y;  //记录鼠标在y轴移动的数据

         x = dx+nx;                   //div在x轴的偏移量加上鼠标在x轴移动的距离

         y = dy+ny;                   //div在y轴的偏移量加上鼠标在y轴移动的距离

         div2.style.left = x+"px";

         div2.style.top = y +"px";

     }

 }

 //鼠标释放时候的函数

 function end(){

     flag = false;                    //鼠标释放

 }

然后在将事件加入到这个div中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了，还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ，这也很简单，只要加上判断就可以了，如果是PC端就使用event，如果是移动端就使用 event.touches ：

 var touch ;

 if(event.touches){

     touch = event.touches[0];

 }else {

     touch = event;

 }

还有一点要注意，在移动端拖动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>

移动端：div在手机页面上随意拖动的更多相关文章

[mobile开发碎碎念]手机页面上显示PDF文件
demo:http://mozilla.github.io/pdf.js/web/viewer.html 项目地址:https://github.com/mozilla/pdf.js <scri ...
绕过限制，在PC上调试微信手机页面
场景假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
JSP通过AJAX获取服务端的时间，在页面上自动更新
1.在页面上引入js <head> <meta http-equiv="Content-Type" content="text/html; charse ...
在PC上调试微信手机页面的三种方法
场景假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
axios增加自定义headers，页面上出现，服务端收不到
问题 axios增加自定义headers,页面上出现,服务端收不到原因 vue-cli起的服务是用node-http-proxy中间件处理的默认是只有几个常用的header,自定义header是直 ...
解决手机浏览器上input 输入框导致页面放大的问题（记录）
在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...
iOS和小米手机拍照上传后,在web端显示旋转
( ′◔ ‸◔`)现在的公司啊都流行混合开发,我们公司也不例外,非要把交互非常多的社区模块用内嵌web页展示,好吧好吧,毕竟有的应用也是这么做的,那既然是社区就肯定少不了用户上传图片的操作,在开发阶段 ...
PC端判断屏幕宽度到达手机宽度的时候，直接跳转手机页面
<script> // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener("resize", function ...
利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

随机推荐

非常好的一篇对linux信号(signal)的解析 (转载)【转】
转自:https://blog.csdn.net/return_cc/article/details/78845346 Linux信号(signal) 机制分析转载至:https://www.cnb ...
Linux内存分配小结--malloc、brk、mmap【转】
转自:https://blog.csdn.net/gfgdsg/article/details/42709943 http://blog.163.com/xychenbaihu@yeah/blog/s ...
mac使用技巧之截图
1.选定区域截图 command+shift+3 选定区域按住control,可以直接截图到剪切板, 按option可以进行比例缩放. 按住shift可以选定区域按住空格键可以进入窗口截图模式. 2 ...
VC显示网页验证码、模拟CSDN网页登录
摘要:by:koma 这两天,本来想花点时间研究一下QQ空间.农场外挂,于是抓包分析一了下,只可惜,在QQ网页登录时进行了加密处理,可惜我对网页编程一窍不通.有些朋友曾讲过那些是通过JS代码进行加密, ...
latex公式、编号、对齐
原文地址:http://blog.csdn.net/hjq376247328/article/details/49718931 LaTeX的数学公式有两种,即行中公式和独立公式.行中公式放在正文中间, ...
日期控件datepicker的使用
引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js ...
web网页测试用例(非常实用)
转自:http://blog.csdn.net/yuki_ying/article/details/54946541 一.Web测试中,各类web控件测试点总结一 .界面检查进入一个页面测试,首先 ...
JMeter3.2生成图形化HTML报告
JMeter3.0引入了Dashboard Report,用于生成HTML页面格式图形化报告的扩展模块. 该模块支持通过两种方式生成多维度图形化测试报告: 在JMeter性能测试结束时,自动生成本次测 ...
Spring如何使用JdbcTemplate调用存储过程的三种情况
注:原文 <Spring如何使用JdbcTemplate调用存储过程的三种情况 > Spring的SimpleJdbcTemplate将存储过程的调用进行了良好的封装,下面列出使用Jdbc ...
Confluence 6 编辑站点欢迎消息使用模板编辑器的小提示
站点欢迎消息是一个模板而不是一个页面,所以你需要使用模板编辑器来对你的消息进行编辑. 你可以和在你 Confluence 中其他页面中一样,在站点欢迎消息模板中添加文本,连接和宏.但是添加图片的话会有 ...

移动端：div在手机页面上随意拖动

移动端：div在手机页面上随意拖动的更多相关文章

随机推荐

热门专题