因公司要求,菜鸡后端人员临时变前端搬运工一个,各种搬运,终于找到有用的方法。
在这里mark一下~
CSS:先设置一个div块
<style type="text/css">
#orange{
width: 100px; height: 100px;
background-color: #4D4D4D;
position: absolute; cursor: pointer;
z-index:999;
-webkit-box-shadow: 3px 3px 0px 3px #C7C7C7;
box-shadow: 3px 3px 3px 0px #C7C7C7;
}
</style>
<div id="orange"></div>
把这个div块放到你需要显示的地方
JS:加载移动逻辑
/*
*PC端div拖拽方法
*/
var oDiv=document.getElementById('orange');
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,要阻止默认事件
}
/*
*移动端div拖拽方法
*缺点:会拖出可视范围,暂未有空解决。
*/
var touchStart_x = null,touchStart_y = null,touchMove_x = null,touchMove_y = null,boxStartX=null,boxStartY=null;
$("#orange").on("touchstart",function(e){
touchStart_x = e.targetTouches[0].pageX;
touchStart_y = e.targetTouches[0].pageY;
boxStartX = $("#orange").position().left;
boxStartY = $("#orange").position().top;
})
$("#orange").on("touchmove",function(e){
touchMove_x = e.targetTouches[0].pageX-touchStart_x;
touchMove_y = e.targetTouches[0].pageY-touchStart_y;
$("#orange").css({
left:boxStartX + touchMove_x,
top:boxStartY + touchMove_y
})
})