移动端拖拽功能HTML,移动端和pc端的拖拽事件

pc端拖拽事件

pc端拖拽事件

body{

margin: 0;

padding: 0;

}

#div1{

position: absolute;

top: 200px;/*div的y轴*/

left: 150px;/*div的x轴*/

width: 300px;

height: 200px;

background-color: gray;

}

div:hover{

cursor: move;

}

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

//封装一个函数用于获取鼠标坐标

function getPos(ev){

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};

}

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||window.event;

var pos=getPos(oEvent); //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标

disX=pos.x-oDiv.offsetLeft;

disY=pos.y-oDiv.offsetTop;

document.οnmοusemοve=function(ev){

/*由于要防止鼠标滑动太快跑出div，这里应该用document.

因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/

var oEvent=ev||window.event;

var pos=getPos(oEvent);

//防止div跑出可视框

var l=pos.x-disX;

var t=pos.y-disY;

if(l<0){

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0){

t=0;

}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

}

document.οnmοuseup=function(ev){

document.οnmοusemοve=null; //将move清除

document.οnmοuseup=null;

}

return false; //火狐的bug，要阻止默认事件

}

移动端的拖拽事件

移动端的拖拽事件的思路是当手指点下记录手指的坐标和box的位置。当手指移动的时候记录手指的坐标和box的位置。这样就可以利用两者的差值来计算box怎么移动。具体代码如下：

Document

#wrap{

width: 100%;

height: 100%;

background-color: #f00;

position: fixed;

top:0;

left: 0;

}

#box{

width: 100px;

height: 100px;

background-color: #0f0;

position: absolute;

top:200px;

left: 200px;

}

var touchStart_x = null,touchStart_y = null,touchMove_x = null,touchMove_y = null,boxStartX=null,boxStartY=null;

$("#box").on("touchstart",function(e){

touchStart_x = e.targetTouches[0].pageX;

touchStart_y = e.targetTouches[0].pageY;

boxStartX = $("#box").position().left;

boxStartY = $("#box").position().top;

})

$("#box").on("touchmove",function(e){

touchMove_x = e.targetTouches[0].pageX-touchStart_x;

touchMove_y = e.targetTouches[0].pageY-touchStart_y;

$("#box").css({

left:boxStartX + touchMove_x,

top:boxStartY + touchMove_y

})

})