Como siempre increible!!!
Voy a ver si lo adapto a mi código, que ahora ha pasado a ser:
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">
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:center; /*aqui mandamos a centrar todo el contenido*/
}
#contenedorppal {
width:100%; /*ancho total de la pagina 77777777777777antes ponia 600*/
border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/
background-color:#FFF8F0;
margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/
text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/
overflow: auto;/*se ajusta a firefox para que se vea bien*/
overflow-y:hidden;
overflow-y:hidden;overflow-x:hidden;
}
#margenDerecho{
margin:10px; /*para que no se pegue al borde*/
padding:10px; /*algo de relleno*/
width:230px; /* este ancho es para que cuadre con el texto*/
/* height:50px; idem*/
border:1px solid #333333; /*decoracion*/
background-color:#CC6600; /*more*/
float:right; /*lo flotamos a la izquierda*/
display:inline; /*display:inline;(*)*/
}
#margenIzquierdo{
margin:10px; /*para que no se pegue al borde*/
padding:10px; /*algo de relleno*/
width:240px; /* este ancho es para que cuadre con el texto*/
/* height:50px; idem*/
border:1px solid #333333; /*decoracion*/
background-color:#CC6600; /*more*/
float:left; /*lo flotamos a la izquierda*/
display:inline; /*display:inline;(*)*/
}
.droppable_demo {
width: 230px;
height: 40px;
background: #fff;
border: 5px solid #ccc;
margin: 0px 1em 1em 0px; }
.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef; }
.draggable{
cursor:pointer;
width:230px;
height:40px;
background:#7baaed;
border:1px solid #333;
margin: 0 1em 1em 0;}
</style>
</head>
<body>
<div id="contenedorppal">
<div id="margenDerecho">
<?
$drop=5;
for($i=1;$i<$drop+1;$i++){?>
<div class="draggable" id="div<? echo $i; ?>" align="center">Texto <? echo $i; ?></div>
<?} //fin for
?>
</div> <!-- fin div margenDerecho -->
<div id="margenIzquierdo">
<?
for($k=1;$k<$drop+1;$k++){
?>
<div class="droppable_demo" id="<? echo $k; ?>">
</div>
<?
} //fin for
?>
</div> <!-- fin div margenIzquierdo -->
<script type="text/javascript">
var capas=document.getElementById("margenDerecho").getElementsByTagName("div");
for (i=0;i<capas.length;i++){
new Draggable(capas[i].id, {revert: true});
}
var capas_cont=document.getElementById("margenIzquierdo").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="#7baaed";
elemento.style.width="230px";
elemento.style.height="40px";
elemento.style.textAlign="center";
elemento.appendChild(document.createTextNode(element.firstChild.nodeValue));
$(dropon.id).appendChild(elemento);
}
});
}
</script>
</div> <!-- fin contenedorppal -->
</body>
</html> Sólo he modificado el aspecto que me traía por la calle de la amargura...
Aunque no es definitivo porque la idea es... acabar mezclando la jerarquía de inputs de el otro post con ésto jejeje y si te sorprende el peso del archivo... no quiero ni pensar en cuando esté todo juntooooo
Pues eso que la idea final es esa, pero ahora lo que quiero es lo que has conseguido, (meter los elementos en los contenedores, sin que se repitan), leer el contenido de los contenedores, y poder retirar los elementos de los contenedores ( por si ha habido un error y el usuario quería poner el elemento en un contenedor diferente del que lo haya puesto...)
Voy a mantener un lucha de comprensión y adaptacióm de tu código y te digo...
Muchas muchas gracias, me estás ayudando un montón :)