Drag and Drop que se redimensione al moverlo

[ceaped]

Buenos días
Utilizo un efecto de drag and drop con jQuery lo muevo de un punto y lo encajo en una casilla. Todo funciona bien.

Yo deseo que la imágen tenga un tamaño menor y que cuando se encaje se ajuste al tamaño del campo.

¿Cómo puedo hacer este efecto ?, ¿Algún ejemplo que me puedan recomendar?

Gracias por su ayuda

[Alexis88]

Cuando se produzca el evento drop, ejecuta una función en la cual asignarás al elemento draggable, las medidas del elemento droppable.

Código Javascript:

$("#id_droppable").droppable({
    drop: function(event, ui){
        $("#id_draggable").css({
            width: $(this).width(),
            height: $(this).height()
        });
    }
});
 

Saludos

[ceaped]

Hola Alexis88
¿Hay algún ejemplo que pueda ver?

Gracias por tu ayuda

[Alexis88]

¿Y si intentas adaptar el ejemplo que te acabo de dar?

Un ayuda más:

• Draggable: El elemento a mover.
• Droppable: El elemento hacia el cual se moverá el elemento draggable.

Saludos

[ceaped]

Hola Alexis88
jejeje siii yo estaba analizando lo que me pasaste, claro.
Te cuento un poco que es lo que estoy haciendo.

Tengo un mapa que deseo utilizar de acá:

http://dorkage.net/blog/2010/06/06/h...-jigsaw-works/

Lo que yo deseo es poner todos los estados (imagenes) del lado izquierdo mas pequeñas y cuando las arrastre al mapa se ajusten al tamaño.

Yo estoy acá probando lo que tu me pasaste pero no logro que me de.

Gracias por tu ayuda

[Alexis88]

Sin código, nadie te va a ayudar.

[ceaped]

Hola Alexis88
Es que el código es el ejemplo que tiene este sitio:

http://puzzles.twicks.net/puzzle/Mexico

Gracias por tu ayuda

[Alexis88]

Me refería a lo que has hecho, a lo que se supone que has intentado adaptar. En el código fuente de esa página, solo veo la estructura del documento y los archivos JS adjuntos, pero no creo que alguien vaya ponerse a revisar línea por línea hasta encontrar el bloque de instrucciones en cuestión. Muéstranos la parte crítica de lo que has adaptado.

Saludos

[ceaped]

Hola Alexis88
Mira que en el ejemplo que puse están las imagenes para arrastar al mapa asi:

Código HTML:

<div class="bp"  id="i-Aguascalientes" style="display: none; background-image:url(images/aguas_calientes.png); width:18px; height:17px; position:absolute; top:294px; left:54px;" longName="Aguascalientes">
<div class="drag"></div>
</div>
 

Y esta el el área en la que se debe poner:

Código HTML:

<div class="droppableP" id="s-Aguascalientes" style="width:18px; height:17px; position: absolute; top: 271px; left: 569px;">
<div class="sensible"></div>
</div>
 

Yo que deseo, qué "aguas_calientes.png" que es la imagen que se arrastra sea de menor tamaño y cuando se ponga sobre el área se ajuste y se ponga del tamaño original.

Gracias por tu ayuda