js手机端拖拽图标

//移动

图片

window.onload=function(){

var oDiv = document.getElementsByClassName('homepage')[0];

var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;

oDiv.addEventListener('touchstart',function(e){

e.preventDefault();//阻止触摸时页面的滚动，缩放

disX = e.touches[0].clientX - this.offsetLeft;

disY = e.touches[0].clientY - this.offsetTop;

//手指按下时的坐标

starX = e.touches[0].clientX;

starY = e.touches[0].clientY;

//console.log(disX);

});

oDiv.addEventListener('touchmove',function(e){

L = e.touches[0].clientX - disX ;

T = e.touches[0].clientY - disY ;

//移动时 当前位置与起始位置之间的差值

starXEnd = e.touches[0].clientX - starX;

starYEnd = e.touches[0].clientY - starY;

//console.log(L);

if(L<0){

//限制拖拽的X范围，不能拖出屏幕

L = 0;

}else if(L > document.documentElement.clientWidth - this.offsetWidth){

L=document.documentElement.clientWidth - this.offsetWidth;

}

if(T<0){

//限制拖拽的Y范围，不能拖出屏幕

T=0;

}else if(document.documentElement.clientHeight< this.offsetTop + $(this).find("img").height() && starYEnd > 0){

T = this.offsetTop;

}

moveX = L + 'px';

moveY =T+'px';

//console.log(moveX);

this.style.left = moveX;

this.style.top = moveY;

});

window.addEventListener('touchend',function(e){

//alert(parseInt(moveX))

//判断滑动方向

var endX = e.changedTouches[0].clientX;

var endY = e.changedTouches[0].clientY;

if(endX == starX && starY==endY){

//alert('没有拖动，直接点击');

location.href="login.html";

}else{

// alert('只拖动，不触发事件');

}

});

}