Usar drag & drop con javascript

[derkenuke]

Sí, creo que nos estamos pasando. Esto ha degenerado tanto que ya no cabe el código en un post. Se han juntado el hambre con las ganas de comer: dos personas que no están buscando la simplificación. Pero en fin.

Creo que no es muy intuitivo que el botón Add Subcapitulo no haga nada si no estamos en un campo de texto. Por lo menos si no va a hacer nada, que nos diga qué estamos haciendo mal.



Bueno, te comento algo de CSS para que lo tengas un poco más estilizado. El problema de que las capas que flotan (float:left) no llenen su contenido se puede solucionar con un elemento HTML al final de la capa contenedora:

Código HTML:

<br style="clear:both" /> 

Creo que no es la manera ideal, funciona pero no es la solución buena. Pásate por el foro de CSS para más cositas de estas. (búscalo antes porque creo que está respondido mil veces).

Te digo los cambios que he implementado para solucionar cosas:

En el DIV contenedorPpal, como te he dicho, al final de él metes ese BR.

Tenemos otro problema: Que los elementos no salen en una línea. En FF los elementos inline no tienen width ni height, por eso te sale así de pequeño el droppable_demo. Para ello hay que ponerlo en block. Pero entonces sale cada uno en una línea nueva. Se colocan en float:left todos los elementos: La caja, el botón de borrar jerarquía, el droppable_demo, y el otro botón para borrar el contenedor. Para ello les he puesto className a los dos botones de borrar y a la caja:

Código PHP:

  // todo esto en sus respectivas líneas para que afecten a lo que tienen que afectar, claro.
contenido.className="caja";
contenido.className="boton_borrar";
contenido.className="boton_borrar";  
   

Y por supuesto en el CSS float:left a todas esas clases, y a droppable_demo también.


No te paso el ejemplo entero porque es una barbaridad, pero los cambios que he hecho son esos. He hecho por supuesto cambios en el CSS para que todo se vea bien en los dos, eso sí que lo posteo:

Código:

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*/
	/* solucionamos que se vea bien en FF con un <br style="clear:both" /> al final del contenedorppal */
}

#margenDerecho{
	margin:10px; /*para que no se pegue al borde*/ 
	padding:10px; /*algo de relleno*/
	width:180px; /* 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;
	/*display: inline;*/
	float: left;
	}
    
  .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{
	display: block;
	border: solid 1px red;
	overflow: auto;		/* FF */
	height: 50px;
}

.boton_borrar, .caja {
	float: left;
}

Otra cosa a comentarte es no otorgar estilos en el javascript a no ser que sea imprescindible (como el marginLeft que marca la jerarquización). Todas esas cosas las he comentado para que no afecten:

Código PHP:

  /*contenido.style.display = "inline"; //para que muestre los contenidos alineados*/
/*contenido.style.display = "inline";    */
/*copia.style.display = "block";*/  
   

Y de hecho lo más lógico al hacer los onfocus y onblur de las cajas sería cambiarlos de className. Así tendríamos en el CSS toda la información de estilos, nada en el javascript.




Bueno, supongo que tienes bastante información como para seguir mejorando el ejemplo si quieres. Llega a estar bastante separadito todo. Lo mejor es que lo mantengas todo muy separado (cada función de javascript, el CSS, el HTML...) y muy comentado. Es importante que cuando tengas finalizado "programita" completo hagas todo lo posible para que dentro de un mes lo puedas retomar y entender todo. Comentar todo un poco más (al inicio de cada función qué hace), y cambiar de nombre a ciertas variables que no se auto-definen (probar_c por ejemplo).

De hecho yo pondría en un comentario la URL de estos posts, por si tienes que volver a ellos algún día fácilmente.

Para más inri te recomiendo una extensión de firefox llamada web developer. Tiene una opción que es View Source > View generated source que te permite ver el contenido HTML generado por javascript. Así me ha facilitado el CSS (si no habría que analizarlo manualmente).


Bueno, pues creo que mi labor aquí va terminando ¿no?