El código para ver como queda es:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
.droppable_demo {
width: 230px;
height: 40px;
background: #fff;
border: 5px solid #ccc;
text-align: center;
position: relative;
top: -60px;
left: 140px;
line-height: 100px; }
.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef; }
</style>
</head>
<body>
<div class="lista" id="lista" style="float:left;width:150px;">
<?
$drop=5;
for($i=1;$i<$drop+1;$i++){?>
<div class="draggable" id="div<? echo $i; ?>" align="center" style="cursor:pointer; width:230px; height:40px; background:#7baaed; border:1px solid #333;">Texto <? echo $i; ?></div>
<?} //fin for
?>
</div>
<div id="contenedores" class="contenedores">
<?
for($k=1;$k<$drop+1;$k++){
?>
<div class="droppable_demo" id="<? echo $k; ?>">
</div>
<?
} //fin for
?>
</div>
<script type="text/javascript">
var capas=document.getElementById("lista").getElementsByTagName("div");
for (i=0;i<capas.length;i++){
new Draggable(capas[i].id, {revert: true});
}
var capas_cont=document.getElementById("contenedores").getElementsByTagName("div");
for (i=0;i<capas_cont.length;i++){
Droppables.add(capas_cont[i].id, {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function(element, dropon) {
// dropon es el contenedor al que arrastro el 'div'
//element es el div que arrastro
elemento = document.createElement("div");
elemento.id = element.id;
elemento.style.background="#345456";
elemento.style.width="230px";
elemento.style.height="40px";
elemento.style.textAlign="center";
elemento.appendChild(document.createTextNode(element.firstChild.nodeValue));
$(dropon.id).appendChild(elemento);
}
});
}
</script>
</body>
</html> Hace falta para lo de arrastrar y eso las librerías de scriptaculous... de todas formas, sin las librerías se ve claramente que está muy mal colocado y no soy capaz de hacerlo mejor.
En el último contenedor, al arrastrar cualquiera de los div arrastrables, se ve, que las letras tb se pasan, lo que pasa es que se ponen debajo entonces no se ven en los demás, solo en el último.
Además si se siguen añadiendo divs arrastrable ( por llamarlos de alguna manera) a los contenedores, los aceptan y los dibuja que se salen del contenedor y todo...
Alguna idea??