Tengo una duda más concreta y espero explicarme...
He conseguido tener una columa de 'datos a arrastrar' que están metidos en div, y otra columna (que se solapa con la anterior) donde están el mismo número de contenedores, que de datos para arrastrar.
Cuando arrastro un div, y lo paso encima de un contenedor, el contenedor cambia de forma, y despues, se le añade encima un nuevo div de tamaño similar, con el texto que contenía el div que estaba arrastrando.
Los problemas son varios:
- El texto se ve debajo del div y no en el centro, dd debería verse.
- Y como he dicho antes, las dos columnas se solapan...
Es que me llevo muy mal con los divs.
Os pongo parte del código, a ver si alguien puede ayudarme:
Código PHP:
//Los estilos
<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>
//esto está e un buble, depende de los datos que haya en una variable de sesión y $drop se aumenta, para luego ver el número de 'contenedores' que hay que poner
<div class="lista" id="lista" style="float:left;width:150px;">
<div class="draggable" id="div<? echo $drop; ?>" align="center" style="cursor:pointer; width:230px; height:40px; background:#7baaed; border:1px solid #333;"><? echo $row['recurso']." "; ?></div>
</div>
//Habrá tantos contenedores como la cantidad de la variable $drop
<div id="contenedores" class="contenedores">
<?
for($k=1;$k<$drop+1;$k++){
?>
<div class="droppable_demo" id="<? echo $k; ?>">
</div>
<?
}
?>
</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) {
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>
Cómo podría mejorar el aspecto??Muchas gracias