简单拖拽:
window.onload=function(){
var oBox=document.getElementById("box");
oBox.onmousedown=function(ev){
var e=ev||event;
var disX=e.clientX-oBox.offsetLeft; //鼠标到oBox左边的距离
var disY=e.clientY-oBox.offsetTop;
document.onmousemove=function(ev){//document，让oBox在整个文档中移动
var e=ev||event;
var l=e.clientX-disX; //e.clientX-disX的新位置
var t=e.clientY-disY;
if(l<=50){l=0} //磁性吸附
else if(l>=document.documentElement.clientWidth-oBox.offsetWidth-50){
l=document.documentElement.clientWidth-oBox.offsetWidth;
}
if(t<=50){t=0}
else if(t>=document.documentElement.clientHeight-oBox.offsetHeight-50){
t=document.documentElement.clientHeight-oBox.offsetHeight;
}
oBox.style.left=l+'px';
oBox.style.top=t+'px';
}
document.onmouseup=function(){ //必须放在onmousedown里面
document.onmousemove=null;//阻止鼠标移动事件
document.onmouseup=null; //防止鼠标多次按下再抬起，触发多次事件
oBox.releaseCapture&&oBox.releaseCapture();//如果前面存在则使用后面
}
oBox.setCapture&&oBox.setCapture();//ie下事件捕获;支持的时候使用(if);鼠标按下的时候触发捕获，抬起释放
return false; //在ff,chrome下阻止选择文字
}
}
拖拽拉大框:
window.onload=function(){
var oBox1=document.getElementById("box1");
var oBox2=document.getElementById("box2");
oBox2.onmousedown=function(ev){
var e=ev||event;
var downX=e.clientX; //开始的坐标
var downY=e.clientY;
var oldWidth=oBox1.offsetWidth; //开始的oBox1的宽高
var oldHeight=oBox1.offsetHeight;
document.onmousemove=function(ev){
var e=ev||event;
var moveX=e.clientX;//移动后的坐标
var moveY=e.clientY;
var targetX=moveX-downX;//运动的距离
var targetY=moveY-downY;
oBox1.style.width=targetX+oldWidth+'px'; //运动后oBox1的新宽高
oBox1.style.height=targetY+oldHeight+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox2.releaseCapture&&oBox2.releaseCapture();
}
oBox2.setCapture&&oBox2.setCapture();
return false;
}
}