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を使用しました： ここを参照してください

将来の参考のために（これ以上フィドルがない場合）： 

$('.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 に答える