js实现一个可以兼容PC端和移动端的div拖动效果实例
2016-12-09 00:00
1066 查看
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件: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距离父辈元素的距离,当鼠标释放的时候将标记改为鼠标已经释放。
下面来看一下代码:
然后在将事件加入到这个div中即可,下面再来看一个在移动端需要做些什么,首先是事件不同,只需要在添加移动端的touchatart、touchmove、touchend就可以了,还有一个不同的时移动端获取坐标是event.touches[0].clientX和event.touches[0].clientY,这也很简单,只要加上判断就可以了,如果是PC端就使用event,如果是移动端就使用event.touches:
还有一点要注意,在移动端拖动div的时候移动端的页面会自动产生滑动效果,所以还需要在touchmove的是给页面添加一个阻止默认事件的函数。
下面是整个代码,可以在Chrome下模拟移动端测试,点击这里查看:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js实现可拖动DIV的方法
javascript div 弹出可拖动窗口
js通过八个点 拖动改变div大小的实现方法
js实现的八点拖动修改div大小的代码
Javascript简单实现可拖动的div
javascript之DIV拖动类 支持在FF下拖动,调用简单
js实现div拖动动画运行轨迹效果代码分享
JavaScript实现可拖拽的拖动层Div实例
js实现div在页面拖动效果
下面就来说说怎么实现这个效果吧,先看一下效果:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
js 鼠标拖动对象 可让任何div实现拖动效果js实现可拖动DIV的方法
javascript div 弹出可拖动窗口
js通过八个点 拖动改变div大小的实现方法
js实现的八点拖动修改div大小的代码
Javascript简单实现可拖动的div
javascript之DIV拖动类 支持在FF下拖动,调用简单
js实现div拖动动画运行轨迹效果代码分享
JavaScript实现可拖拽的拖动层Div实例
js实现div在页面拖动效果
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- [div+css]晒晒最新制作专题推广页模板
- js数组实现图片轮播
- div 2 列 50%宽度布局
- div 2 列 50%宽度布局
- html小技巧之td,div标签里内容不换行
- div的offsetLeft与style.left区别
- js可突破windows弹退效果代码
- webBrowser执行js的方法,并返回值,c#后台取值的实现
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- div flash firefox div层总是被flash层遮盖
- 小技巧处理div内容溢出
- 让超出DIV宽度范围的文字自动显示省略号...
- 解决div被flash挡住的设置方法
- 网页中Span和Div的区别
- DIV+CSS经常用到的属性、参数及说明