HTML
<div id="box"></div>
<img src="img/2.jpg"/>
CSS
#box,img{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#box{
left: 300px;
top: 200px;
}
JS
var Box=document.getElementById("box");
var oImg=document.getElementsByTagName("img")[0];
oImg.οnmοusedοwn=function(ev){
var ev=ev||event;
var disX=ev.clientX-this.offsetLeft;
var disY=ev.clientY-this.offsetTop;
//设置全局捕获
//所有的onmousemove或者onmouseup都被oImg截获,然后作用在oImg身上
if(oImg.setCapture){
oImg.setCapture();
}
document.οnmοusemοve=function(ev){
var ev=ev||event;
var L=ev.clientX-disX;
var T=ev.clientY-disY;
//限制拖拽范围
//横向
if(L<0){
L=0;
}else if(L>document.documentElement.clientWidth-oImg.offsetWidth){
L=document.documentElement.clientWidth-oImg.offsetWidth;
}
//纵向
if(T<0){
T=0;
}else if(T>document.documentElement.clientHeight-oImg.offsetHeight){
T=document.documentElement.clientHeight-oImg.offsetHeight;
}
//碰撞检测
var L1=oImg.offsetLeft;
var B1=oImg.offsetLeft+oImg.clientWidth;
var T1=oImg.offsetTop;
var B2=oImg.offsetTop+oImg.clientHeight;
var L2=Box.offsetLeft;
var B3=Box.offsetLeft+Box.clientWidth;
var T2=Box.offsetTop;
var B4=Box.offsetTop+Box.clientHeight;
if(B1<L2||B3<L1||B2<T2||B4<T1){
Box.style.background="red";
}else{
Box.style.background="green";
}
oImg.style.left=L+'px';
oImg.style.top=T+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
//释放全局捕获
if(oImg.releaseCapture){
oImg.releaseCapture();
}
}
//清除默认事件
return false;
}