拖拽小实例
在日常业务中有很多时候会用到拖拽，比如弹窗什么的，还有一些导航什么的拖动组成自己喜欢的导航。今天就写了两个小例子带大家了解PC端和移动端的拖拽是怎么实现的。
PC端拖拽
pc端拖动主要是onmouse事件，当你鼠标对拖动目标点下时触发拖动目标的onmousedown事件，此时记录下鼠标点击的位置坐标和拖动目标的右上角坐标，得到二者之差，鼠标点下并且拖动触发document的onmousemove事件，获得不断移动的鼠标位置坐标，再减去之前得到的差值，把得到的Y轴移动值赋给top，X轴移动值赋给left；当鼠标松开时触发onmouseup事件，此时销毁document.onmousemove和拖动目标的onmousemove和事件，一个简单的拖拽就完成了。注意一下，当拖动是会有默认事件发生，比如往下拖动，如果有滚动条的话，会使滚动条滚动，这时需要阻止一下默认事件，event.preventDefault();
当然，如果你要限制范围的话，可以在onmousemove中吧Y轴移动值和X轴移动值用判断限制一下，我限制的是不能超过文档窗口，有兴趣可以改一下。
function touch(id){
var obj = document.getElementById(id);
obj.onmousedown = function(event){
var disX = event.pageX - obj.offsetLeft;
var disY = event.pageY - obj.offsetTop;
var W = document.documentElement.clientWidth-obj.offsetWidth;
var H = document.documentElement.clientHeight-obj.offsetHeight;
document.onmousemove = function(event){
event.preventDefault();
var l = event.pageX - disX;
var t = event.pageY - disY;
if(l<0){
l = 0;
}
if(l>W){
l = W ;
}
if(t<0){
t = 0;
}
if(t>H){
t = H;
}
obj.style.top = t+ 'px';
obj.style.left = l+'px';
}
obj.onmouseup = function(){
document.onmousemove = null;
obj.onmouseup = null;
}
}
};
移动端拖拽
移动端的拖拽是由touch事件完成的，和PC的onmouse事件大致一样，touchstart是手指按下，可以通过event.targetTouches.length获得有多少手指按下，一般拖动一根手指，于是当event.targetTouches.length 1时才能触发拖拽事件，event.targetTouches[0]相当于鼠标的event，通过这个可以获取手指按下的坐标，其余的大致和PC差不多。
function touch(id){
var obj = document.getElementById(id);
obj.addEventListener('touchstart', function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
var disX=touch.pageX-obj.offsetLeft;
var disY=touch.pageY-obj.offsetTop;
var W = document.documentElement.clientWidth-obj.offsetWidth;
var H = document.documentElement.clientHeight-obj.offsetHeight;
obj.addEventListener('touchmove',move);
function move(event){
event.preventDefault();
var touch2=event.targetTouches[0];
var l=touch2.pageX-disX;
var t=touch2.pageY-disY;
if(l<0){
l=0;
};
if(l>W){
l=W;
};
if(t<0){
t=0;
};
if(t>H){
t=H;
};
obj.style.left=l+'px';
obj.style.top=t+'px';
};
obj.addEventListener('touchend',chend);
function chend(event){
obj.removeEventListener('touchmove',move);
obj.removeEventListener('touchend',chend);
};
};
}, false);
};
不过有个地方要注意一下，移动端如果使用event.preventDefault();阻止默认事件的话，可能会对流畅度有点影响，如果你想应用到高级的浏览器上的话，就不要使用event.preventDefault();了，推荐的做法是用css中的touch-action来阻止默认事件，touch-action:none使触控事件发生在元素上时，不进行任何操作。也就是当touchstart发生时让html的touch-action为none，拖动完成touchend时，把html的touch-action改成auto就行了。
function touch(id){
var obj = document.getElementById(id);
obj.addEventListener('touchstart', function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
var disX=touch.pageX-obj.offsetLeft;
var disY=touch.pageY-obj.offsetTop;
obj.addEventListener('touchmove',move);
function move(event){
document.documentElement.style.touchAction = 'none';
var touch2=event.targetTouches[0];
var l=touch2.pageX-disX;
var t=touch2.pageY-disY;
if(l<0){
l=0;
};
if(l>document.documentElement.clientWidth-obj.offsetWidth){
l=document.documentElement.clientWidth-obj.offsetWidth
};
if(t<0){
t=0;
};
if(t>document.documentElement.clientHeight-obj.offsetHeight){
t=document.documentElement.clientHeight-obj.offsetHeight;
};
obj.style.left=l+'px';
obj.style.top=t+'px';
};
obj.addEventListener('touchend',chend);
function chend(event){
document.documentElement.style.touchAction = 'auto';
obj.removeEventListener('touchmove',move);
obj.removeEventListener('touchend',chend);
};
};
}, false);
};
近期评论