<script type="text/javascript">
var img = document.querySelector("#yangyang");
//信号量
var x = 100;
var y = 100;
var startX,startY,dx,dy;
//触摸开始
img.addEventListener("touchstart", function(event){
//阻止页面有默认事件
event.preventDefault();
//拿到这个手指
var thefinger = event.touches[0];
//记录开始触摸的位置
startX = thefinger.clientX;
startY = thefinger.clientY;
console.log(startX,startY);
}, true);
//触摸移动
img.addEventListener("touchmove", function(event){
//阻止页面有默认事件
event.preventDefault();
//拿到这个手指
var thefinger = event.touches[0];
//记录开始触摸的位置
dx = thefinger.clientX - startX;
dy = thefinger.clientY - startY;
img.style.left = x + dx + "px";
img.style.top = y + dy + "px";
}, true);
//触摸结束
img.addEventListener("touchend", function(event){
//阻止页面有默认事件
event.preventDefault();
//改变信号量
x += dx;
y += dy;
}, true);
</script>
移动端拖拽事件
最新推荐文章于 2024-05-15 17:05:01 发布