draggable pictures revert back to bottom of pile

draggable pictures revert back to bottom of pile

hi every

I'm new to jquery, so I do apologise if I don't see the obvious in what I am trying to achieve.

I have added 6 images and arranged them one on top of the other. What i would like to happen is when a user drags the top image away, it reverts back to the stack but at the bottom of the pile.

this is what I have to far:

<div id=”pinboard”>
<ul>
<li><img src="images/chalet.jpg" /></li>
<li><img src="images/girl.jpg" /></li>
<li><img src="images/iceland.jpg" /></li>
<li><img src="images/ice.jpg" /></li>
<li><img src="images/sail.jpg" /></li>
<li><img src="images/whitemountains.jpg" /></li>
</ul>
</div>



ul li{
list-style-type: none;
position: absolute;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow:        0px 0px 10px #000;
-webkit-transition:0.2s -webkit-transform linear;
-moz-transition: 0.2s -moz-transform linear;
transition:    0.2s transform linear;
padding:15px 15px 40px 15px;
background-color:white;
}

.ui-draggable-dragging {
 -webkit-transform: rotate(0deg) scale(1.2) !important;
 -moz-transform: rotate(0deg) scale(1.2) !important;
 -ms-transform: rotate(0deg) scale(1.2) !important;
 -o-transform: rotate(0deg) scale(1.2) !important;
 transform: rotate(0deg)     scale(1.2) !important;}
 
 


$('li').each(function(){
xpos = Math.floor(Math.random()*920);
ypos = Math.floor(Math.random()*420);
rotation = Math.floor(Math.    random()*15);

var rNum = (Math.random()*20)-2;  
  $(this).css( {   
    '-webkit-transform': 'rotate('+rNum+'2deg)',
    '-moz-transform': 'rotate('+rNum+'2deg)'
});
}).draggable({revert: true});


any help with this is greatly appreciated.

many thanks