js拖拽思想

拖拽。。。

//定于个div；

<div class="box" style="background-color:#9F0;width:50px;height:50px; position:absolute;left:10px;top:20px"></div>

var div=document.getElementsByClassName("box")[0]; 
div.οnmοusedοwn=function(e){
var e=e||event;

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

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

var x=e.clientX-div.offsetLeft;/
var y=e.clientY-div.offsetTop;
document.οnmοusemοve=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；οnmοuseup=null；主要起停止作用。不会让div随着鼠标的位置改变而改变

document.οnmοuseup=function()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
return false;//解决firefox低版本的bug问题
}