jquery - ドラッグ可能でクリックして前面に移動

Question

私は Jquery と JqueryUI を使用して、サイト上のいくつかの要素をドラッグ可能にしています。クリックすると前面に表示されるようにしたいのですが、問題があります。元々でした。

 // jquery


$(function() {
  $( ".flower" ).draggable();
});


var zmax = 0;
$( '.flower' ).click( function () {
  $( this ).siblings( '.flower' ).each(function() {
    var cur = $( this ).css( 'z-index');
    zmax = cur > zmax ? $( this ).css( 'z-index') : zmax;
  });
$( this ).css( 'z-index', zmax+1 );
});


//html

<div id="flower1" class="flower"><img src="images/flowers/f1.png"></img></div>
<div id="flower2" class="flower"><img src="images/flowers/f2.png"></img></div>
<div id="flower3" class="flower"><img src="images/flowers/f3.png"></img></div>


//css

.flower {
    position: fixed;
     z-index: 0;
     left: 10px;
     top: 10px;
}

助けてくれてありがとう。