迅速建立微信小程序_js完成一个可以兼容PC端和移动端的div拖动

js实现一个可以兼容PC端和移动端的div拖动效果实例       这篇文章主要介绍了js实现一个可以兼容PC端和移动端的div拖动效果实例,具有一定的参考价值,有需要的可以了解一下。

前段时间写了一个简单的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,
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,
 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读