移动端：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将底层的方向传感器和运动传感器进行了高级封装, ...
随机推荐
- JavaScript-DOM（重点）
解析过程 DOM树(一切皆是节点) DOM可以做什么 清楚DOM的结构 获取其它DOM(事件源)的三种方式 事件 事件的三要素 绑定事件的方式 JavaScript入口函数 window.onload ...
- 1.Linux电源管理-休眠与唤醒【转】
转自:https://www.cnblogs.com/lifexy/p/9629699.html 1.休眠方式 在内核中,休眠方式有很多种,可以通过下面命令查看 # cat /sys/power/st ...
- python装饰器的4种类型：函数装饰函数、函数装饰类、类装饰函数、类装饰类
一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...
- 在Ubuntu 16.04下安装nodejs
源安装: 1.curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - 2.sudo apt-get install -y node ...
- atom 的使用插件
emmet # html补全minimap # 源码预览图linter # 语法检查file-icons # 文件图标docblockr # 注释块autoclose-html # 自动闭合html标 ...
- WINDOWS资源编译器出错信息
ACCELERATORS语句的type域应包含ASCⅡ值或VIRTKEY值. BEGIN expected in table BEGIN关键字应紧跟在ACCELERATOR ...
- [HTTP]HTTP 中的 Transfer-Encoding 报文头
一.背景: 持续连接的问题:对于非持续连接,浏览器可以通过连接是否关闭来界定请求或响应实体的边界:而对于持续连接,这种方法显然不奏效.有时,尽管我已经发送完所有数据,但浏览器并不知道这一点,它无法得知 ...
- 30个mysql千万级大数据SQL查询优化技巧详解
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- python与用户交互、数据类型
一.与用户交互 1.什么是用户交互: 程序等待用户输入一些数据,程序执行完毕反馈信息. 2.如何使用 在python3中使用input,input会将用户输入的如何内容存为字符串:在python中分为 ...
- 体验go语言的风骚式编程
最近想搞搞后台开发,话说注意力就转移到了公司用的golang.用Go做微服务比较方便,或许是因为golang强悍的语法吧,看到go的语法,自己已被深深的吸引.关于学习后台如何选择可以参考<做后台 ...