我要评论移动端拖拽事件代码实例
<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>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论