javascript实现移动端上的触屏拖拽功能

前端之家收集整理的这篇文章主要介绍了javascript实现移动端上的触屏拖拽功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下

效果图:

代码:

<Meta charset="utf-8">
touchstart,touchmove,touchend,touchcancel
@H_404_22@ // 获取节点 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",false);
function defaultEvent(e) {
e.preventDefault();
}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

猜你在找的JavaScript相关文章