您的位置：首页 > 移动开发

js实现一个可以兼容PC端和移动端的div拖动效果

2016-12-09 12:06 826 查看
前段时间写了一个简单的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距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。

下面来看一下代码：

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>


如有问题请指正，谢谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  移动 拖动
相关文章推荐
新的分享
章节导航