标签归档:拖放

移动端实现块拖动功能

主要的原理是通过获取手指拖动时的位置坐标,来计算块移动的相对位置(判断是否超出界面)。拖动的同时需要禁止页面滚动,拖动结束后恢复。具体的实现代码如下:

var helper=document.querySelector('#helper');
var maxW=document.body.clientWidth-helper.offsetWidth;//可移动的最大宽度
var maxH=document.body.clientHeight-helper.offsetHeight;//可移动的最大高度

helper.addEventListener('touchstart',function(e){
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    oL = touch.clientX - helper.offsetLeft;//鼠标所点位置的坐标
    oT = touch.clientY - helper.offsetTop;
    //阻止页面滚动
    document.body.ontouchmove=function(e){
	    e.preventDefault();
	}

	//兼容android微信
	document.body.style.height = '100%';
	document.body.style.overflow = 'hidden';
})

helper.addEventListener('touchmove',function(e){
   var ev = e || window.event;
   var touch = ev.targetTouches[0];
   var oLeft = touch.clientX - oL;
   var oTop = touch.clientY - oT;
   if(oLeft<0){
       oLeft=0;
   }else if (oLeft>=maxW) {
       oLeft=maxW;
   }
   if(oTop<0){
       oTop=0;
   }else if (oTop>=maxH) {
       oTop=maxH;
   }

   helper.style.left = oLeft + 'px';
   helper.style.top = oTop + 'px';
})

helper.addEventListener('touchend',function(){
	//恢复页面滚动
    document.body.ontouchmove=function(e){}

   	//兼容android微信
    document.body.style.height = 'auto';
	document.body.style.overflow = 'auto';
});

Demo:(兼容安卓、iOS及相应微信端)

drap