javascript实现移动端上的触屏拖拽功能
作者：Cakty、Riven
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了基于javascript实现移动端上的触屏拖拽功能，感兴趣的小伙伴们可以参考一下
本文是分享了javascript实现移动端上的触屏拖拽功能，具体内容如下
实现代码：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
&meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /&
height: 2000
height:200
background-color:
touchstart,touchmove,
touchend,touchcancel
&div id="block"&&/div&
// 获取节点
var block = document.getElementById("block");
var oW,oH;
// 绑定touchstart事件
block.addEventListener("touchstart", function(e) {
console.log(e);
var touches = e.touches[0];
oW = touches.clientX - block.offsetL
oH = touches.clientY - block.offsetT
//阻止页面的滑动默认事件
document.addEventListener("touchmove",defaultEvent,false);
block.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if(oLeft & 0) {
oLeft = 0;
}else if(oLeft & document.documentElement.clientWidth - block.offsetWidth) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth);
block.style.left = oLeft + "px";
block.style.top = oTop + "px";
block.addEventListener("touchend",function() {
document.removeEventListener("touchmove",defaultEvent,false);
function defaultEvent(e) {
e.preventDefault();
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具966,690 二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
移动Web之触摸和指针事件详解
移动Web之触摸和指针事件详解
日. 估计阅读时间:
欲知区块链、VR、TensorFlow等潮流技术和框架，请锁定
Author Contacted
相关厂商内容
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。}