一个小方块拖拽效果
拖拽*{ padding:0; margin:0; list-style:none;}
#div{ width:100px; height:100px; background:red; position:absolute;}
window.οnlοad=function(){
var odiv=document.getElementById("div");
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
alert(w+'+'+h);
odiv.οnmοusedοwn=function(e){
var oe=e||event;
var divX=oe.clientX-odiv.offsetLeft;
var divY=oe.clientY-odiv.offsetTop;
document.οnmοusemοve=function(e){
var oe=e||event;
_left=oe.clientX-divX;
_top=oe.clientY-divY;
if(_top<0){
_top=0;
}else if(_top>h-100){
_top=h-100
}
if(_left<0){
_left=0;
}else if(_left>w-100){
_left=w-100;
}
odiv.style.left=_left+'px';
odiv.style.top=_top+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
}
}
现在问题是如果有多个div小方块该怎么循环实现每个都可以拖拽
拖拽*{ padding:0; margin:0; list-style:none;}
div{ width:100px; height:100px; background:red; position:absolute;}
window.οnlοad=function(){
var odiv=document.getElementsByTagName("div");
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
alert(w+'+'+h);
odiv.οnmοusedοwn=function(e){
var oe=e||event;
var divX=oe.clientX-odiv.offsetLeft;
var divY=oe.clientY-odiv.offsetTop;
document.οnmοusemοve=function(e){
var oe=e||event;
_left=oe.clientX-divX;
_top=oe.clientY-divY;
if(_top<0){
_top=0;
}else if(_top>h-100){
_top=h-100
}
if(_left<0){
_left=0;
}else if(_left>w-100){
_left=w-100;
}
odiv.style.left=_left+'px';
odiv.style.top=_top+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
}
}
怎么改?