1

我是 jquery 的新手，所以如果我没有看到我想要实现的明显目标，我深表歉意。

我添加了 6 张图片，并将它们一张放在另一张上。我想要发生的是当用户将顶部图像拖走时，它会恢复到堆栈但在堆栈的底部。

这就是我必须要做的：

<div id=”pinboard”&gt;
 <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});

我尝试过以各种方式使用可放置、可拖动、可排序。我也尝试过使用 zindex 来改变位置。

对此的任何帮助将不胜感激。

非常感谢

4

1 回答 1

0

可能有更好的方法来做到这一点。
我使用了一些 css'ing 来解决这个问题： 见这里

对于未来的参考（如果没有更多的小提琴）： 

$('.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();
});
于 2012-10-21T15:16:26.803 回答