js拖拽思想

来源：互联网发布：电脑网络连接在哪里找编辑：程序博客网时间：2024/04/16 23:31

拖拽。。。

//定于个div；

var div=document.getElementsByClassName("box")[0];
div.onmousedown=function(e){
var e=e||event;

//这里主要为了把鼠标的位置定在div内

//鼠标位置减去div的移量；得出鼠标出现在div的位置为x,y

var x=e.clientX-div.offsetLeft;/
var y=e.clientY-div.offsetTop;
document.onmousemove=function(e){
var oevent=e||event;

//整个div移动的位置
var boxX=oevent.clientX-x;
var boxY=oevent.clientY-y;

//页面的大小减去div的大小
var width=document.documentElement.clientWidth-div.offsetWidth;
var height=document.documentElement.clientHeight-div.offsetHeight;

//让div不会移出页面，出现滚动条等；
if(boxX<0){boxX=0}else if(boxX>width){boxX=width}
if(boxY<0){boxY=0}else if(boxY>height){boxY=height}

//div的位置随鼠标移动而改变
div.style.left=boxX+'px';
div.style.top=boxY+'px';
}
//鼠标松开，把onmouseove=null；onmouseup=null；主要起停止作用。不会让div随着鼠标的位置改变而改变

document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
}
return false;//解决firefox低版本的bug问题
}

1 0