jQuery que pueden arrastrarse + lanzables - Mueva físicamente elemento arrastrado en un recipiente caído

Question

tengo que ser capaz de tomar un elemento que se establece como arrastrable y físicamente mover ese elemento en el recipiente en lugar de sólo la superposición como la funcionalidad actual hace.

Así, por ejemplo:

<div class="container"></div> 
<div class="image"> 
    <img class="thumb" src="images/Koala.jpg" alt="" /> 
</div> 

$(function() { 
    $(".image").draggable(); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      alert('dropped!'); 
     } 
    }); 
}); 

Así que después de que la imagen haya sido arrastrado y soltado en el 'contenedor' div necesito el elemento HTML real que ser trasladado allí.

Así que después de producido el evento, si tuviera que mirar a la fuente usando herramientas de Chrome dev me gustaría ver:

<div class="container"> 
    <div class="image"> 
     <img class="thumb" src="images/Koala.jpg" alt="" /> 
    </div> 
</div> 

Es esto posible?

Gracias

Answer 1

Esto debe mover el elemento arrastrado a la droppable en el árbol dom.

drop: function (event, ui) { 
    $(this).append(ui.draggable); 
} 

Answer 2

En la función de descenso, $(this) es el lanzables aceptar el que pueden arrastrarse, por lo que sólo tiene que utilizar .append() para añadir el que pueden arrastrarse a la lanzables: http://jsfiddle.net/saluce/P6TjC/

$(function() { 
    $(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      $(this).append(ui.draggable.css({position: 'static'})); 
      alert('dropped!'); 
     } 
    }); 
});​