明霞山资源网 Design By www.htccd.com
本文实例为大家分享了js实现适配移动端的拖动效果,供大家参考,具体内容如下
1.html
<div id="div1"> <div id="div2"></div> </div>
2.js
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);
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,移动端,拖动
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。