Hola!, mira no se si te pueda dar alguna mejor idea, pero yo hace unas semanas hize un ejercicio parecido a lo que quieres, simplemente debes agregar el siguiente código HTML si quieres una caja nueva:
<div class="contenedorCaja">
<div class="cajas">
CAJA 12
</div>
</div>
Sólo que usan posiciones absolutas, por lo que si se cambia de tamaño la ventana o se quita y se pone un elemento nuevo, estas seguiran en el mísmo lugar.
Usa libreria JQuery, esta algo desordenado y todas las variables y funciones son públicas jeje.
Aquí el código:
Código HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
body{
margin:0 auto;
}
#contenedor{
//width:auto;
float:left;
}
.contenedorCaja{
width:300px;/*400px*/
height:100px;/*100px*/
margin:5px;
float:left;
}
.cajas{
width:296px;/*400px*/
height:96px;/*100px*/
border:2px solid #000;
text-align:center;
position:absolute;
background:blue;
color:#fff;
font-weight:bold;
}
.caja-activa{
z-index:9999;
border:2px solid red;
}
#espacio_caja{
position:absolute;
border:2px dashed gray;
width:100px;height:100px;
display:none;
}
</style>
<title>onresize test</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var difX,difY,ThisCaja,origenX,origenY,origenes;
$(document).ready(function(){
$(".cajas").mousedown(function(){return false});
origenes={length:0};
origenes_default={length:0};
$(".cajas").each(function(i,v){
cajaID="caja"+i;
$(this).attr("id",cajaID);
x=$(this).position().left;
y=$(this).position().top;
origenes[cajaID]={x:x,y:y,x2:x+$(this).outerWidth(),y2:y+$(this).outerHeight()};
origenes_default[cajaID]={x:x,y:y,x2:x+$(this).outerWidth(),y2:y+$(this).outerHeight()};
origenes.length+=1;
origenes_default.length+=1;
R=parseInt(Math.random()*9);
G=parseInt(Math.random()*9);
B=parseInt(Math.random()*9);
$(this).css({left:x+"px",top:y+"px",backgroundColor:"#"+String(R)+String(G)+String(B)});
});
$(".cajas").mousedown(function(event){
inicio=false;
x=event.pageX?event.pageX:event.x;
y=event.pageY?event.pageY:event.y;
origenX=origenes[$(this).attr("id")].x;
origenY=origenes[$(this).attr("id")].y;
difX=x-origenX;
difY=y-origenY;
ThisCaja=$(this);
$(this).addClass("caja-activa");
$("#espacio_caja").css({left:origenX+"px",top:origenY+"px",display:"block",width:$(ThisCaja).innerWidth()+"px",height:$(ThisCaja).innerHeight()+"px"});
$(window).bind("mouseup",soltar);
$(window).bind("mousemove",mover);
});
});
//var caja_previa="";var seguir=true;
function mover(event){
x=event.pageX?event.pageX:event.x;
y=event.pageY?event.pageY:event.y;
finalX=x-difX;
finalY=y-difY;
$(ThisCaja).css({left:finalX+"px",top:finalY+"px"});
for(i=0;i<origenes.length;i++){
o=origenes["caja"+i];
w=$(ThisCaja).outerWidth();
h=$(ThisCaja).outerHeight();
/*w_sec=caja_previa?$(caja_previa).outerWidth():0;
h_sec=caja_previa?$(caja_previa).outerHeight():0;*/
//sumar w a finalX o h a finalY dependiendo de la necesidad
if(x>=o.x && x<=o.x2 && y>=o.y && y<=o.y2 && "caja"+i!=$(ThisCaja).attr("id"))// && "caja"+i!=$(caja_previa).attr("id") && seguir)
{
a=origenes[$(ThisCaja).attr("id")];
b=origenes["caja"+i];
a_x_old=a.x;
a_y_old=a.y;
//Invertir posiciones
$("#caja"+i).animate({left:a.x+"px",top:a.y+"px"},"slow");
//if(caja_previa=="")caja_previa=$("#caja"+i);
$("#espacio_caja").css({left:b.x+"px",top:b.y+"px",display:"block",width:$(ThisCaja).innerWidth()+"px",height:$(ThisCaja).innerHeight()+"px"});
a.x=b.x;a.x2=a.x+$(ThisCaja).outerWidth();
a.y=b.y;a.y2=a.y+$(ThisCaja).outerHeight();
b.x=a_x_old;b.x2=b.x+$("#caja"+i).outerWidth();
b.y=a_y_old;b.y2=b.y+$("#caja"+i).outerHeight();
origenX=a.x;
origenY=a.y;
seguir=false;
break;
}
/*else if("caja"+i==$(caja_previa).attr("id") && !seguir && (finalX>o.x+w_sec || finalY>o.y+h_sec || finalX+w<o.x || finalY+h<o.y)){
caja_previa="";alert(1);
} */
}
}
function soltar(event){
$(ThisCaja).removeClass("caja-activa");
$(window).unbind({mousemove:"",mouseup:""});
$(ThisCaja).css({left:origenX+"px",top:origenY+"px"});
$("#espacio_caja").css("display","none");
}
</script>
</head>
<body>
<div id="espacio_caja"></div>
<div id="contenedor">
<div class="contenedorCaja">
<div class="cajas">
CAJA 1
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 2
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 3
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 4
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 5
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 6
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 7
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 8
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 9
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 10
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 11
</div>
</div>
<div class="contenedorCaja">
<div class="cajas">
CAJA 12
</div>
</div>
</div>
<input type="button" value="Reiniciar posiciones" onclick="$('.cajas').each(function(){od=origenes_default[$(this).attr('id')];o=origenes[$(this).attr('id')];$(this).animate({left:od.x+'px',top:od.y+'px'},'slow');o.x=od.x;o.y=od.y;o.x2=o.x+$(this).outerWidth();o.y=od.y;o.y2=o.y+$(this).outerHeight()});"/>
<div id="log" style="clear:both"></div>
</body>
</html>
Saludos
