Código HTML:
<html>
<head>
<title>Página nueva</title>
<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:auto; /* 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;(*)*/
}
#margenIzquierdo{
margin:10px; /*para que no se pegue al borde*/
padding:10px; /*algo de relleno*/
width:auto; /*240 px cambiado para boton borrar 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: 170px;
height: 40px;
background: #fff;
border: 5px solid #ccc;
margin: 0px 1em 1em 0px;
text-align: center;
vertical-align:middle;}
.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef; }
.draggable{
cursor:pointer;
width:150px;
height:20px;
background:#7baaed;
border:1px solid #333;
margin: 0 1em 1em 0;
text-align: center;}
.unalinea{}
</style>
<script type="text/javascript">
<!--
function insertAfter(nodo, elemento){
with(elemento.parentNode)
(lastChild == elemento) ? appendChild(nodo) : insertBefore(nodo, elemento.nextSibling);
}
var num=0;//Para poner identificadores
function probar_c(){
contenedor = document.createElement('div'); // 2
contenedor.id = 'modulo_'+num; // 3
contenedor.className = 'unalinea'; // 3
contenido = document.createElement('input'); // 2
contenido.type = 'text'; // 3
contenido.name='cap_'+num;
contenido.onclick = function () {foco=this} // 9
contenido.style.backgroundColor='#eeeeee';
contenido.onfocus = function () {this.style.backgroundColor = '#cccccc';} // 9
contenido.onblur = function () {this.style.backgroundColor = '#eeeeee';} // 9
contenido.style.display = "inline"; //para que muestre los contenidos alineados
contenedor.appendChild(contenido); // 4
contenido = document.createElement('input'); // 5
contenido.type = 'button'; // 6
contenido.value = 'Borrar Jerarquia'; // 8
contenido.name = 'div_'+num; // 8
contenido.onclick = function () {confirmar(this)} // 9
contenido.style.display = "inline";
contenedor.appendChild(contenido); // 4
contenido = document.createElement('div'); // 2
contenido.id = 'cont_'+num; // 3
contenido.className='droppable_demo';
contenido.style.display = "inline";
contenedor.appendChild(contenido); // 4
contenido = document.createElement('input'); // 5
contenido.type = 'button'; // 6
contenido.value = 'Borrar contenedor'; // 8
contenido.name = 'b_'+num; // 8
contenido.onclick = function () {confirmar_contenedor(this)} // 9
contenido.style.display = "inline";
contenedor.appendChild(contenido); // 4
num++;
return contenedor;
}
var foco=0;
function capitulo_subcapitulo(){
if(foco!=0){
var copia = probar_c();
copia.style.display = "block";
var nuevoMargen, anteriorMargin = parseInt(foco.parentNode.style.marginLeft) || 0;
copia.style.marginLeft = (nuevoMargen=anteriorMargin+2) +"em";
// tendremos que recorrer todos los hermanos siguientes (nextSibling) que tengan como
//margen nuevoMargen (o más) para saber dónde está el último "hijo". Éste es el problema
//de no hacerlo con listas, que tenemos que hallar manualmente la jerarquía
var despuesDe = foco.parentNode;
if(despuesDe.id== 'fiel')
if(despuesDe.nextSibling)
despuesDe = despuesDe.nextSibling;
while( (despuesDe.nextSibling) && (parseInt(despuesDe.nextSibling.style.marginLeft) || 0) >= nuevoMargen ){
despuesDe = despuesDe.nextSibling;
}
insertAfter(copia, despuesDe);
add_contenedor_apli(copia);
foco.focus(); // le devolvemos el foco tras pulsar el botón
}
//foco=0;
}
function add_contenedor_apli(copia){
var capas_cont=copia.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];
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.");
}
}
});
}
}
function borrar(btnBorrar) {
var nuestroDiv = descendiente = btnBorrar.parentNode;
var cont_ocupado=nuestroDiv.getElementsByTagName("div");
if(cont_ocupado[0].ocupado){
//hacer una copia del siguiente nodo y despues eliminarlo
var partes_div=cont_ocupado[1].id.split('_');
var nuevoDiv = document.createElement("DIV");
nuevoDiv.className="draggable";
nuevoDiv.id="bloq_"+partes_div[2];
nuevoDiv.appendChild(document.createTextNode(cont_ocupado[1].firstChild.nodeValue));
var posAnt=document.getElementById("margenDerecho");
posAnt.appendChild(nuevoDiv);
nuevoDiv.elObjDraggable=new Draggable(nuevoDiv, {revert: true});
}
// hallemos todos los nodos descendientes (hijos, nietos...) del actual
var margenMayor = (parseInt(nuestroDiv.style.marginLeft) || 0) + 2;
var descendientes = [];
while(
(descendiente = descendiente.nextSibling) && // si tiene hermano siguiente
(descendiente.nodeType===1) && // si el hermano siguiente es tipo 1 (nodo HTML)
((parseInt(descendiente.style.marginLeft) || 0) >= margenMayor) ) { // si el hermano siguiente está identado con respecto a nuestroDiv
descendientes.push(descendiente); // lo añadimos a la lista para borrarlo
}
// eliminémoslos
for(var i=descendientes.length; i--; ){
var cont_ocupado=descendientes[i].getElementsByTagName("div");
if(cont_ocupado[0].ocupado){
//hacer una copia del siguiente nodo y despues eliminarlo
var partes_div=cont_ocupado[1].id.split('_');
var nuevoDiv = document.createElement("DIV");
nuevoDiv.className="draggable";
nuevoDiv.id="bloq_"+partes_div[2];
nuevoDiv.appendChild(document.createTextNode(cont_ocupado[1].firstChild.nodeValue));
var posAnt=document.getElementById("margenDerecho");
posAnt.appendChild(nuevoDiv);
nuevoDiv.elObjDraggable=new Draggable(nuevoDiv, {revert: true});
}
descendientes[i].parentNode.removeChild(descendientes[i]); //estaba, añado al bucle lo demas
}
// eliminemos el actual
nuestroDiv.parentNode.removeChild(nuestroDiv); // 10
}
function confirmar(obj){
if(confirm('¿ Está seguro de que desea eliminar el objeto seleccionado ?')){
borrar(obj);
}
}