jquery - 可拖动并点击到前面

Question

我正在使用 Jquery 和 JqueryUI 使网站上的一些元素可拖动，我希望它们在单击时出现在前面，但我遇到了问题 - 可拖动工作正常，但每个元素 (.flower) 只是保持它的顺序原来是。

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

谢谢你的帮助。

Answer 1

.click() 事件在某种程度上与 .draggable 有问题——必须单击并按住才能运行代码并将元素置于顶部。

将 .click() 替换为 .mousedown() 并解决了问题。

Answer 2

您的代码正在运行。尝试像这样重新排列您的代码：

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

});