移动端拖拽功能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 ElementById('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;
arm7开发板}
oDiv.style.left=l+'px';
p=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
烟花生产})
})
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议