移动端 slide拖拽
<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拖拽的更多相关文章
- 移动端的拖拽这个demo实现的功能
SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...
- 移动端的拖拽排序在react中实现 了解一下
最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...
- 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- javascript小实例，移动端页面中的拖拽
上文说到,想将移动端的拖拽说一说,那现在趁有时间,就将这个福利文带来了,哈哈! 在我还不知道怎么做移动端的手势操作的时候,我觉得这TM实在是太难了,这是多么高深的学问啊,手势操作耶,上滑下滑左滑右滑的 ...
- 移动端H5混合开发，Touch触控，拖拽，长按, 滑屏 实现方案
概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...
- 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件
当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...
- pc端移动端拖拽实现
#div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="di ...
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- Unity输出PC端（Windows） 拖拽文件到app中
需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...
随机推荐
- 学习TensorFlow，concat连接两个（或多个）通道
深度学习中,我们经常要使用的技术之一,连接连个通道作为下一个网络层的输入,那么在tensorflow怎么来实现呢? 我查看了tensorflow的API,找到了这个函数: tf.concat(conc ...
- mysqldump的几个主要选项探究
0.前言 本文主要探讨 mysqldump 的几种主要工作方式,并且比较一下和 mk-parralel-dump的一些差异,为备份方式的选择提供更多的帮助. 1.mysqldump 首先来看下 mys ...
- JAVA之旅（二十七）——字节流的缓冲区，拷贝mp3，自定义字节流缓冲区，读取键盘录入，转换流InputStreamReader，写入转换流，流操作的规律
JAVA之旅(二十七)--字节流的缓冲区,拷贝mp3,自定义字节流缓冲区,读取键盘录入,转换流InputStreamReader,写入转换流,流操作的规律 我们继续来聊聊I/O 一.字节流的缓冲区 这 ...
- Java-IO之总框架
在Java IO中我们会经常提到输入流和输出流,流是一种抽象的数据总称,本质是能够进行数据的传输.按照流的方向分为:输入流和输出流.按照流中处理数据的单位,可以将其区分为:字节流和字符流.在Java中 ...
- Android官方命令深入分析之bmgr
作者:宋志辉 bmgr是一个可以跟Backup Manager进行交互的shell工具,要使用这个工具,Android设备API最小为8.它提供了备份和恢复操作的命令,所以你无需频繁的清除数据.这些命 ...
- Spring注入
Spring注入 Spring注入是指在启动Spring容器加载bean配置的时候,完成对变量的赋值行为. 常用的两种注入方式: setter注入 构造注入 <?xml version=&quo ...
- STL：deque用法详解
deque函数: deque容器为一个给定类型的元素进行线性处理,像向量一样,它能够快速地随机访问任一个元素,并且能够高效地插入和删除容器的尾部元素.但它又与vector不同,deque支持高效插入和 ...
- 监视锁——Java同步的基本思想
翻译人员: 铁锚翻译时间: 2013年11月13日原文链接: Monitors – The Basic Idea of Java synchronization如果你上过操作系统课程,你就知道监视锁( ...
- Ext.Net 1.X_读写配置文件
[摘要] 有N个ERP数据库帐套,需要从XML文件中读取. 加载指定路径的XML /// <summary> /// 取得帐套列表 /// </summary> private ...
- Swift的基础之UILabel控件
对于UILabel的相关内容,其他控件可以相似创建 //设置全局变量,将下面的 let 去掉,然后替换即可 //var myLabel = UILabel(); //系统生成的view ...