web前端|js教程
JS，拖动效果
web前端-js教程
短网址3.1源码,vscode在vue缩进,ubuntu代替win,tomcat存放图片,sqlite建立外键约束,前端面试题三大框架,爬虫数据采集器教学,php引用返回,长春seo代运营,学习html的网站,css网页实例,淘宝自定义模板代码下载lzw
前段时间写了一个简单的p拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY。
好磁力 源码,vscode没有虫子那个图标,ubuntu下载AS,tomcat打印的日志,爬虫抓去视频,php表单制作,荆州便宜的seo推广价格,卖游戏号网站源码,帝国工业模板lzw
下面就来说说怎么实现这个效果吧，先看一下效果：
cms报名系统源码,ubuntu打开不了wifi,pycharm不能下载爬虫,酒店php代码,seo批量导流lzw
PC端
移动端
先来分析一个拖动的流程，以PC端为例，首先是鼠标按下（mousedown事件），然后移动（mousemove事件），最后释放鼠标（mouseup事件），首先要设置一个变量记录鼠标是否按下，在鼠标按下的时候，我们做一个标记，然后需要记录一下鼠标当前的坐标，还有这个p当前的偏移量，当鼠标开始移动的时候，记录下鼠标当前的坐标，用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时p的偏移量就是现在p距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。
下面来看一下代码：
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 = p2.offsetLeft; //记录p当时的左偏移量 dy = p2.offsetTop; //记录p的上偏移量}//鼠标移动时的函数function move(){ if(flag){ //如果是鼠标按下则继续执行 nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据 ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据 x = dx+nx;//p在x轴的偏移量加上鼠标在x轴移动的距离 y = dy+ny;//p在y轴的偏移量加上鼠标在y轴移动的距离 p2.style.left = x+"px"; p2.style.top = y +"px"; }}//鼠标释放时候的函数function end(){ flag = false;//鼠标释放}
然后在将事件加入到这个p中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的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;}
还有一点要注意，在移动端拖动p的时候移动端的页面会自动产生滑动效果，所以还需要在touchmove的是给页面添加一个阻止默认事件的函数。
下面是整个代码，可以在Chrome下模拟移动端测试，点击这里查看：
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 = p2.offsetLeft; dy = p2.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;p2.style.left = x+"px";p2.style.top = y +"px";//阻止页面的滑动默认事件document.addEventListener("touchmove",function(){ event.preventDefault();},false); } } //鼠标释放时候的函数 function end(){ flag = false; } var p2 = document.getElementById("p2"); p2.addEventListener("mousedown",function(){ down(); },false); p2.addEventListener("touchstart",function(){ down(); },false) p2.addEventListener("mousemove",function(){ move(); },false); p2.addEventListener("touchmove",function(){ move(); },false) document.body.addEventListener("mouseup",function(){ end(); },false); p2.addEventListener("touchend",function(){ end(); },false);
