Hola:
Sí, veo que uno de los problemas es CSS. Pero lo he podido solventar, y creo que ya tengo algo como lo que buscas.
Cositas:
- No se pueden poner de id palabras que comienzan por número. En tu bucle se ponían ids que eran un sólo número.
- Cuando hacías un nuevo elemento en el
onDrop pusiste
elemento.id = element.id; lo cual no tiene mucho sentido, ya que no pueden haber dos ids iguales en el documento.
-
$(dropon.id).appendChild() es lo mismo que
dropon.appendChild(), porque
dropon es directamente el nodo.
- Si movemos una capa azul y la cambiamos de sitio en el DOM -cambiarlo de parentNode - (ya sea con
appendChild(), o
removeChild()...) no dejará el hueco vacío, todos los demás elementos se desplazarán para llenar su hueco vacío. Lo he solucionado con position:absolute (no creo que sea la mejor manera).
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script src="scriptaculous/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;
z-index: 1;
}
.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef;
}
.azul {
cursor:pointer;
width:230px;
height:40px;
background:#7baaed;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="lista" id="lista" style="width:150px; height: 200px;">
<div class="draggable azul" id="div1" align="center" style="position: absolute; left: 10px; top: 20px;">Texto 1</div>
<div class="draggable azul" id="div2" align="center" style="position: absolute; left: 10px; top: 64px;">Texto 2</div>
<div class="draggable azul" id="div3" align="center" style="position: absolute; left: 10px; top: 108px;">Texto 3</div>
<div class="draggable azul" id="div4" align="center" style="position: absolute; left: 10px; top: 152px;">Texto 4</div>
</div>
<div id="contenedores" class="contenedores">
<div class="droppable_demo" id="capa1"></div>
<div class="droppable_demo" id="capa2"></div>
<div class="droppable_demo" id="capa3"></div>
<div class="droppable_demo" id="capa4"></div>
</div>
<script type="text/javascript">
var capas=document.getElementById("lista").getElementsByTagName("div");
for (var i=0;i<capas.length;i++){
capas[i].elObjDraggable = new Draggable(capas[i].id, {revert: true});
}
var capas_cont=document.getElementById("contenedores").getElementsByTagName("div");
for (var 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 ) {
// Vamos a crear una "copia" de element, pero manualmente.
var nuevoDiv = document.createElement("DIV");
nuevoDiv.className = "azul";
nuevoDiv.appendChild(document.createTextNode(element.firstChild.nodeValue));
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.");
}
}
});
}
</script>
</body>
</html>
En
onDrop he hecho una copia del nodo "a mano" ya que usando
cloneNode() aquello se volvía incomprensible. Es lo malo de trabajar con frameworks, no controlas del todo tu código. Por otra parte verás cosas como
element.elObjDraggable.options.revert = false; que me las he tenido que sacar de la manga leyendo el dragdrop.js del scriptaculous...
Como ves
capas[i].elObjDraggable es una propiedad inventada de un objeto HTML, y que contiene un objeto javascript. Las propiedades inventadas pueden contener de todo.
Me imagino que está cerca de lo que quieres ¿no?
No sé lo que quieres hacer con esos datos, pero si quieres mandarlos al servidor supongo que tendrás que crear un formulario oculto que rellenarás transparentemente al usuario cuando se realicen operaciones de dragDrop. No creo que sea demasiado complicado.
Otro aspecto a tener en cuenta: 265Kb para un simple drag & drop...
Un saludo.