<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/Css">
body{background-color:#000000;}
.window{position:absolute;z-index:1;overflow:hidden;width:100%;height:400px;background-color:red;left: 0px;}
.dragme{position:relative;background-image:url('img/testbg.png');width:100%;height:400px;}
</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

var isdrag=false;
var tx,x;

$(function(){
document.getElementById("tap").addEventListener('touchend',function(){
isdrag = false;
});
document.getElementById("tap").addEventListener('touchstart',selectmouse);
document.getElementById("tap").addEventListener('touchmove',movemouse);
});

function movemouse(e){
if (isdrag){
var n = tx + e.touches[0].pageX - x;
$("#tap").css("left",n);
return false;
}
}

function selectmouse(e){
isdrag = true;
tx = parseInt(document.getElementById("tap").style.left+0);
x = e.touches[0].pageX;
return false;
}

// var isdrag=false;
// var tx,x,ty,y;
// $(function(){
// document.getElementById("tap").addEventListener('touchend',function(){
// isdrag = false;
// });
// document.getElementById("tap").addEventListener('touchstart',selectmouse);
// document.getElementById("tap").addEventListener('touchmove',movemouse);
// });
// function movemouse(e){
// if (isdrag){
// var n = tx + e.touches[0].pageX - x;
// m = ty + e.touches[0].pageY - y;
// $("#tap").css({"left":n,"top":m});
// return false;
// }
// }
// function selectmouse(e){
// isdrag = true;
// tx = parseInt(document.getElementById("tap").style.left+0);
// ty = parseInt(document.getElementById("tap").style.top+0);
// x = e.touches[0].pageX;
// y = e.touches[0].pageY;
// return false;
// }
</script>

</head>
<body>
<div align="left" class="window">
<div id="tap" class="dragme">
这是一个可以通过触摸屏拖动的demo<br>
这个demo花费了我半天时间，原因是以前从来没有做过面向触摸屏的Web，按说mousedown,mouseup,mousemove和touchstart，touchend，touchmove
之间是可以互通的，也就是说一般面向pc开发的mouse时间对touch事件有效，据说是效率有差异。但是pc上测试没有任何问题，在手机上就是无效。
然后……
然后百度了很久很久……

</div>
</div>
</html>

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/Css">body {height: 2000px;}#block {width:200px;height:200px;background-color: red;position: absolute;left: 0;top: 0;}</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

window.onload=function(){

// 获取节点
  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.offsetLeft;
   oH = touches.clientY - block.offsetTop;
   //阻止页面的滑动默认事件
   document.addEventListener("touchmove",defaultEvent,false);
  },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";
  },false);

block.addEventListener("touchend",function() {
   document.removeEventListener("touchmove",defaultEvent,false);
  },false);
  function defaultEvent(e) {
   e.preventDefault();
  }

}
</script>

</head>
<body>
<div>
   touchstart,touchmove,
   touchend,touchcancel
  </div>
  <div id="block"></div>
</html>

移动端 slide拖拽的更多相关文章

  1. 移动端的拖拽这个demo实现的功能

    SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...

  2. 移动端的拖拽排序在react中实现 了解一下

    最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...

  3. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  4. javascript小实例，移动端页面中的拖拽

    上文说到,想将移动端的拖拽说一说,那现在趁有时间,就将这个福利文带来了,哈哈! 在我还不知道怎么做移动端的手势操作的时候,我觉得这TM实在是太难了,这是多么高深的学问啊,手势操作耶,上滑下滑左滑右滑的 ...

  5. 移动端H5混合开发，Touch触控，拖拽，长按, 滑屏 实现方案

    概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...

  6. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  7. pc端移动端拖拽实现

    #div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="di ...

  8. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  9. Unity输出PC端（Windows） 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

随机推荐

  1. iOS关于图片点到像素转换之杂谈

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 不管是以什么方法生成的图片,是从磁盘上读取的,还是从其他对象中 ...

  2. iOS中 按钮和标题完美各种排列／完美教程 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 前言:最近常常用到按钮和相应标题的组合,当按钮设置图片加标题时,触发范围较小,不易触发,最重要的是还要调试偏移量, ...

  3. Android必知必会--GreenDao缓存

    Github版 CSDN版 本篇文章不是介绍GreenDao的配置和基础使用,记录一下GreenDao缓存的问题,帮助遇到同样问题的朋友找到原因和方法,下面是示例: 场景重现 //第一次查询 List ...

  4. linux命令指usermod（管理用户以及权限的命令）

    usermod命令:用来修改用户帐号的各项设定. 示例:usermod -a -G usergroupnewuser 或者usermod -aGusergroup newuser 语法:usermod ...

  5. Axure如何建立共享项目、如何编辑共享项目、如何获取共享项目

    如果小伙伴是一名编程工作者,我们不可以避免的会和Axure这块软件握手,但是但一个项目需要协同操作的时候,就需要用到项目共享的功能.类似我们的svn,想起机房合作的时候,每天早上来到427的我们,打开 ...

  6. 如何在Cocos2D游戏中实现A*寻路算法(七)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  7. UNIX环境高级编程——system函数

    system函数 功能:调用fork产生子进程,由子进程来调用:/bin/sh -c command来执行参数command所代表的命令,阻塞当前进程直到command命 令执行完毕. int sys ...

  8. EBS条形码打印

    Oracle  提供两种方式实现 128 码的编码 第一种方式是使用 Reports Builder 实现对 128 码编码, 在 Metalink 305090.1[1]  有 比较详尽的描述,其中 ...

  9. Spring mvc,uploadifive 文件上传实践（转自：https://segmentfault.com/a/1190000004503262）

     1.前台页面: 引入js和css 全选复制放进笔记 <link type="text/css" rel="stylesheet" href=&quo ...

  10. javascript语法之循环语句小练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...