html如何让两个方块重叠,【Web前端问题】多个小方块拖拽如何循环？

一个小方块拖拽效果

拖拽

*{ 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;

};

}

}

怎么改？

回答：

可以试试下面的代码，看看是不是你想要的

拖拽

window.οnlοad=function(){

var oBtn = document.querySelector("#allDiv");

var dDiv = oBtn.querySelectorAll("div");

for(var i=0;i

dDiv[i].οnmοusedοwn=function(e){

var oe=e||event;

var divCur=document.getElementById(oe.target.id);

var w=document.documentElement.clientWidth;

var h=document.documentElement.clientHeight;

var divX=oe.clientX-divCur.offsetLeft;

var divY=oe.clientY-divCur.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;

}

divCur.style.left=_left+'px';

divCur.style.top=_top+'px';

}

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

oe.preventDefault();

}

}

}

*{ padding:0; margin:0; list-style:none;}

#div{ width:100px; height:100px; background:red; position:absolute;}

#div1{ width:100px; height:100px; background:green; position:absolute;}

#div2{ width:100px; height:100px; background:yellow; position:absolute;}