Drag and drop images from one div to another div

Question

i would like to drag some images from divs to another div...i have a div container who has 5 more divs,in those 5 divs are some pngs. What i need is to drag 1 by one these pngs from 1st div to a div with id="dropspot" then clicking on "next button" to change to the second div which is in container and clear the dropspot div,and so on untill 5th div.

I have tryed something but aint what i need :( these function makes all images draggable and i need just the images inside of container to be draggable.

Heres a fiddle: http://jsfiddle.net/ygaw2/7/

and some code:

$(function() {
    $( "#container img" ).draggable();
    ({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });
    $( "#dropspot" ).droppable({

      tolerance: 'fit',

      drop: function( event, ui ) {


      }
    });
  });

Answer 1

Try this solution: http://jqueryui.com/droppable/#photo-manager It seems to me just like u wanna it to work.

In droppable callback u can clear droppable element content.

EDIT

Everything you need is in that example ive linked + one thing:

$( "#container img" ).draggable({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });

Delete (); after draggable