PC端拖动小插件

var flag = false; //是否按下鼠标的标记
var cur = { //记录鼠标按下时的坐标
x:0,
y:0
}
var nx,ny,dx,dy,x,y ;
//鼠标按下时的函数
function down(){
flag = true; //确认鼠标按下
cur.x = event.clientX; //记录当前鼠标的x坐标
cur.y = event.clientY; //记录当前鼠标的y坐标
dx = div2.offsetLeft; //记录div当时的左偏移量
dy = div2.offsetTop; //记录div的上偏移量
}
//鼠标移动时的函数
function move(){
if(flag){ //如果是鼠标按下则继续执行
nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
x = dx+nx <= 0 ? 0 : dx+nx; //div在x轴的偏移量加上鼠标在x轴移动的距离
y = dy+ny <= 0 ? 0 : dy+ny; //div在y轴的偏移量加上鼠标在y轴移动的距离
//判断是否超出容器
if(dx+nx+200 >= document.body.offsetWidth){
x = document.body.offsetWidth -200
}
if(dy+ny+200 >= window.innerHeight){
y = window.innerHeight -200
}
div2.style.left = x+"px";
div2.style.top = y +"px";
}
}
//鼠标释放时候的函数
function end(){
flag = false;
}
var div2 = document.getElementById("div2");

div2.addEventListener("touchstart",function(){
    down();
},false)
div2.addEventListener("touchmove",function(){
    move();
},false)
div2.addEventListener("touchend",function(){
    end();
},false);
posted @ 2017-03-07 17:26  不忘初心ˇ  阅读(427)  评论(0编辑  收藏  举报