Problema jQuery

suaveSHOW #1 Jul '10

Buenas, esta mañana he empezado a hacer una practica con jquery y consiste en hacer etiquetas en una foto arrastrando el div y cambiandole el tamaño.

Para ello uso las funciones de jquery draggable y resizable, el problema viene que si yo escribo en el código fuente el div con su identificador pues cambia de tamaño y se mueve, pero cuando le doy al botón "Añadir caja" el div que me añade con el mismo identificador ya no se puede mover ni arrastrar.

Creo que el problema esta en que esos divs que crea ya no tienen la función de moverse ni cambiar de tamaño, y aquí os dejo el archivo para que lo veais vosotros mismos.
http://suav3.es/cajas/

A ver si veis la solucion.

Fr4nk0 #2 Jul '10

Hola.
Un problema parecido tuve yo cuando hice una especie de iGoogle, que al añadir nuevos widgets y añadirle movimiento, o no se lo añadía o sólo lo tenía ese último.

La solución es que cada vez que crees un nuevo div (para etiquetar una foto), tienes que añadir de nuevo draggable a todos los elementos.

En tu caso, como los divs con movimiento son los de clase 'caja' pues sería algo tal que así:

$("button.add").click(function() {
 //Añadimos el nuevo div de class caja
 $("#cajas").after($("<div class='caja' />"));
//Inicializamos draggable para Todos los elementos de class caja
 $(".caja").draggable();
 });

Yo lo he probado y funciona. Pruebalo

PD: Lo único es que la caja resizable es la única que tú pones, ya si quieres que se redimensionen debes añadirselo cuando creas la caja.

NeB1 #3 Jul '10

#1 efectivamente es porque los nuevos elementos no tienen 'bindeada' la función resize. O bien haces como #2 te dices, o utilizas la función 'delegate' de jquery o 'live' con un par de trucos.

Fr4nk0 #4 Jul '10

Efectivamente como dice #3 con las funciones delegate (o live), te ahorras el inicializar cada vez el draggable.

Aunque yo usando el sortable tuve problemillas con el delegate, pero bueno tampoco probé lo suficiente para hacerlo funcionar que seguro que se podía.

suaveSHOW #5 Jul '10

Gracias #2, he probado a añdir tambien
$(".caja").resizable();
dentro de la funcion onclick del boton y tambien me lo cambia de tamaño así que gracias por todo.

EDIT:
Aprovecho para hacer otra duda.
He dejado el código así para tener todas las cajas dentro del contenedor #cajas.

$(document).ready(function() {
    $(".caja").draggable();
	$(".caja").resizable();
	$("button.add").click(function() {
		var div = '<div class="caja"></div>';
		var cur = $("div#cajas").html();
		$("div#cajas").html(cur+div);
		$(".caja").draggable();
		$(".caja").resizable();
	});
});

Como se haría para hacer un bucle, supongo que for each para sacar las coordenadas de cada uno, porque sacar las coordenadas se, pero de todos creo que me resulta complicado, voy a intentarlo por mi cuenta y me pasare luego a ver si habeis puesto algo.

Gracias

NeB1 #6 Jul '10

$(".cajas").each(function(){
   alert($(this).css('left')+"x"+$(this).css('right')); 
});

suaveSHOW #7 Jul '10

#6 en realidad haria falta left y top para saber posicionarlo en un eje X,Y

NeB1 #8 Jul '10

#7 xDDD se me ha escapado, la cuestión era enseñarte el .each xDDD

BeNaReS #9 Jul '10

#5 viendo tu codigo yo lo dejaria algo mas asi que tambien lo añades dentro de el div cajas y esta mas claro

$(document).ready(function() {
    $(".caja").draggable().resizable();
	$("button.add").click(function() {
		var div = '<div class="caja"></div>';
		$(div).appendTo($("#cajas")).draggable().resizable();
	});
});

EDIT:
Para lo otro que quieres mirate el position() o el offset() de jquery depende para que lo quieras

Problema jQuery

Usuarios habituales

Tags