移动端 touch 实现 拖动元素
var homeMove = (function () {
//touch自适应
var k = "ontouchend" in window ? "touchend" : "click";
var isdrag = false;
var moveid = document.getElementById("moveid");
var sWidth = document.body.clientWidth;
var sHeight = document.documentElement.clientHeight; //window.screen.height;
var width = moveid.offsetWidth;
var height = moveid.offsetHeight;
var tx, x;
var ty, y;
var i = 0, j = 0; ;
function movemousex(e) {
e.preventDefault();
if (isdrag) {
var n = tx + e.touches[0].pageX - x;
var maxWidth = sWidth - width;
if (n > maxWidth) {
n = maxWidth;
} else if (n < 0) {
n = 0;
}
$('#moveid').css("left", n);
return false;
}
}
function selectmousex(e) {
isdrag = true;
tx = parseInt(moveid.offsetLeft + 0);
x = e.touches[0].pageX;
return false;
}
function movemousey(e) {
e.preventDefault();
if (isdrag) {
var n = ty + e.touches[0].pageY - y;
var maxHeight = sHeight - height;
if (n > maxHeight) {
n = maxHeight;
} else if (n < 0) {
n = 0;
}
$('#moveid').css("top", n);
return false;
}
}
function selectmousey(e) {
isdrag = true;
ty = parseInt(moveid.offsetTop + 0);
y = e.touches[0].pageY;
return false;
}
function addMoveEvent() {
moveid.addEventListener('touchend', function () {
isdrag = false;
});
moveid.addEventListener('touchstart', selectmousex);
moveid.addEventListener('touchmove', movemousex, false);
moveid.addEventListener('touchstart', selectmousey);
moveid.addEventListener('touchmove', movemousey, false);
moveid.onclick = function () {
window.location.href = "/";
}
}
return { addMoveEvent: addMoveEvent };
} ());
$(function () {
homeMove.addMoveEvent();
});
最新文章
- MVC学习系列8--分页和排序
- Android Studio 工具插件
- JSP内置对象的解析
- CMSIS-DAP调试器
- 温习H3C S5500的VLAN配置
- Android Studio学习随笔-基本事件（点击）
- Windows 7下 搭建 基于 ssh 的sftp 服务器
- Swift中文教程(二)--简单值
- Android Bitmap 常见的几个操作：缩放，裁剪，旋转，偏移
- 介绍一个轻量级iOS安全框架：SSKeyChain
- emacs 配置.emacs
- 枚举专项练习_Uva725(Division)_Uva11059(Maximun Product)
- sublime text 3配置c/c++编译环境
- [Database]各数据库连接配置:Oracle:thin 数据库连接/MySQL 连接配置
- IE 8 下sharepoint 2013 难看的字体的解决方案
- DB2创建function（二）
- Linux source命令
- EasyGui 学习文档【超详细中文版】
- SQL中的函数以及实例
- hdu 2031 进制转换（栈思想的使用）