Question

我是jquery的新手，所以如果我没有看到我想要实现的目标，我会道歉。

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

这就是我所要做的：

<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});

我尝试过以各种方式使用droppable，draggable，sortable。我也尝试使用zindex来改变位置。

非常感谢任何帮助。

非常感谢

Answer 1

可能有更好的方法来做到这一点我用了一些css'ing来做这个伎俩：see here

对于将来的参考（如果没有其他小提琴）：

$('.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();
});

可拖动的图片恢复到桩的底部

1 个答案: