pongo el código junto.
Le he añadido un identificador al nuevo bloque que se crea.
Ademas he puesto una función que no vale para nada en concreto, solamente devuelve los identificadores de los div que contiene la clase margenDerecho y margenIzquierdo, al pulsar el botón (es solo para aclararme de como se almacenan).
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;
text-align: center; }
.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>
<form ENCTYPE="multipart/form-data" METHOD="post" name="form">
<div id="contenedorppal">
<div id="margenDerecho">
<?
$drop=5;
for($i=1;$i<$drop+1;$i++){?>
<div class="draggable" id="bloq_<? 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="cont_<? 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++){
capas[i].elObjDraggable=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
if( !dropon.ocupado ) {
var nuevoDiv = document.createElement("DIV");
nuevoDiv.className="draggable";
nuevoDiv.appendChild(document.createTextNode(element.firstChild.nodeValue));
//Le pongo identificador único que por si lo necesito, tiene la forma:
// nuevo_idcontenedor_idbloquearrastrado
var vector = element.id.split('_'); //obtengo el identificador del div que arrastro
var vector_cont = dropon.id.split('_');//obtengo el identificador del contenedor
nuevoDiv.id="nuevo_"+vector_cont[1]+"_"+vector[1];
alert(nuevoDiv.id);
dropon.appendChild(nuevoDiv);
element.elObjDraggable.options.revert = false;
element.parentNode.removeChild(element);
dropon.ocupado = true;
}
else {
alert("Esta casilla está ocupada, usa otra por favor.");
}
}
});
}
/*var capas=document.getElementById("margenIzquierdo").getElementsByTagName("div");
for (i=0;i<capas.length;i++){
var vector=capas[i].id.split("_");
if(vector[0]=="nuevo"){
capas[i].elObjDraggable=new Draggable(capas[i].id, {revert: true});
}
}*/
function mostrarValores(){
var capas_cont=document.getElementById("margenIzquierdo").getElementsByTagName("div");
for (i=0;i<capas_cont.length;i++){
alert(capas_cont[i].id);
}
var capas_cont=document.getElementById("margenDerecho").getElementsByTagName("div");
for (i=0;i<capas_cont.length;i++){
alert(capas_cont[i].id);
}
}
</script>
<input type="submit" value="Seleccionar" name="seleccionar" onClick="mostrarValores();">
</div> <!-- fin contenedorppal -->
</form>
</body>
</html> Mañana intentaré que pase lo contrario que ahora, vamos que vuelvan a su posicion...ya t contaré....
Buenas noches!!!!