首页 > 代码库 > 关于移动端拖拽
关于移动端拖拽
移动端碰撞检测
function drag(obj1,obj2,success){
obj1.addEventListener("touchstart", function(e) {
var touches = e.touches[0];
window.disX= touches.clientX - obj1.offsetLeft;
window.disX= touches.clientY - obj1.offsetTop;
//阻止页面的滑动默认事件
document.addEventListener("touchmove",defaultEvent,false);
},false)
obj1.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - disX;
var oTop = touches.clientY - disX;
if(oLeft < 0) {
oLeft = 0;
}else if(oLeft > document.documentElement.clientWidth - obj1.offsetWidth) {
oLeft = (document.documentElement.clientWidth - obj1.offsetWidth);
}
if(oTop < 0) {
oTop = 0;
}else if(oLeft > document.documentElement.clientHeight - obj1.offsetHeight) {
oTop = (document.documentElement.clientHeight - obj1.offsetHeight);
}
obj1.style.left = oLeft + "px";
obj1.style.top = oTop + "px";
},false);
obj1.addEventListener("touchend",function() {
document.removeEventListener("touchmove",defaultEvent,false);
var l1=obj1.offsetLeft;
var r1=l1+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=t1+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=l2+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=t2+obj2.offsetHeight;
if (l2>r1 || l1>r2 || t1>b2 || t2>b1){
obj2.style.background=‘green‘;
}
else{
success&&success()
}
},false);
function defaultEvent(e) {
e.preventDefault();
}
}
pc版本
window.onload=function (){
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
function drag(obj1,obj2,success){
obj1.onmousedown=function (ev){
var oEvent=ev || event;
var disX=oEvent.clientX-obj1.offsetLeft;
var disY=oEvent.clientY-obj1.offsetTop;
document.onmousemove=function (ev){
var oEvent=ev || event;
var left=oEvent.clientX-disX;
var top=oEvent.clientY-disY;
obj1.style.left=left+‘px‘;
obj1.style.top=top+‘px‘;
var l1=obj1.offsetLeft;
var r1=l1+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=t1+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=l2+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=t2+obj2.offsetHeight;
if (l2>r1 || l1>r2 || t1>b2 || t2>b1){
obj2.style.background=‘green‘;
}
else{
success()
}
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
}
drag(oDiv1,oDiv2,function(){
oDiv2.style.background="yellow"
})
};
关于移动端拖拽