Question

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 class="img"><img src="images/chalet.jpg" /></li>
 <li class="img"><img src="images/girl.jpg" /></li>
 <li class="img"><img src="images/iceland.jpg" /></li>
 <li class="img"><img src="images/ice.jpg" /></li>
 <li class="img"><img src="images/sail.jpg" /></li>
 <li class="img"><img src="images/whitemountains.jpg" /></li>
 </ul>
</div>



.img{
 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});

I have tried using droppable, draggable, sortable in various ways. I have also tried using the zindex to change the position.

any help with this is greatly appreciated.

many thanks

Answer 1

There are probably better ways to do this.
I used some css’ing to do the trick: see here

For future ref (in case there’s no more fiddle):

$('.img').draggable();
$('.img').on('mouseup',function(){
    $(this).hide();
    var zI = $(this).css('z-index');
    if (zI == 1){
        var restart = 2;
        $('.img').css('z-index', restart);
        zI = restart;
    }
    $(this).css({
        'position': 'absolute',
        'left': '0px',
        'top': '0px',
        'z-index': zI-1
    });
    console.log(zI);
    $(this).show();
});