js鼠标拖拽

html

<div id="box">
</div>

css

*{margin:0;padding:0;}
#box{width:200px;height:200px;background:cyan;position:absolute;}

js

<script type="text/javascript">
/******
拖拽原理：
拖拽状态=0
鼠标在元素上按下的时候{
拖拽状态=1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做
如果拖拽状态是1，那么
元素y = 现在鼠标y-原来鼠标y+原来元素y
元素x = 现在鼠标x-原来鼠标x+原来元素X
}
鼠标在任何放开的时候{
拖拽状态=0
}
******/

var isDown=false;
var objLeft,objTop,posX,posY,obj;
window.onload=function(){
obj=document.getElementById('box');
obj.onmousedown=down;
obj.onmousemove=move;
obj.onmouseup=up;
}
function down(event){
obj.style.cursor="move";
isDown=true;
objLeft=obj.offsetLeft;
objTop=obj.offsetTop;
posX=parseInt(mousePosition(event).x);
posY=parseInt(mousePosition(event).y);
}
function move(event){
if(isDown==true){
var x=parseInt(mousePosition(event).x-posX+objLeft);
var y=parseInt(mousePosition(event).y-posY+objTop);
var w=document.body.clientWidth-obj.offsetWidth;
var h=document.body.clientHeight-obj.offsetHeight;
console.log(x+","+y);
if(x<0){
x=0
}else if(x>w){
x=w
};
if(y<0){
y=0
}
obj.style.left=x+"px";
obj.style.top=y+"px";
}
}
function up(){
isDown=false;
}
function mousePosition(evt){
var xPos,yPos;
evt=evt||window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
}else{
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{
x:xPos,
y:yPos
}
}
</script>