Jquery 拖动并单击到前面

我使用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;
}

//jquery
$（函数（）{
$（“.flower”）.draggable（）；
});
var-zmax=0；
$（'.flower'）。单击（函数（）{
$（this）.兄弟姐妹（'.flower'）。每个（函数（）{
var cur=$（this.css（'z-index'）；
zmax=cur>zmax？$（this）.css（'z-index'）：zmax；
});
$（this.css（'z-index'，zmax+1）；
});
//html
//css
.花{
位置：固定；
z指数：0；
左：10px；
顶部：10px；
}

---

谢谢您的帮助。

您的代码正在运行。尝试按如下方式重新排列代码：

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

});

.click（）事件在某种程度上与.draggable有问题–必须单击并保持代码运行并将元素置于顶部

---

将.click（）替换为.mousedown（），从而解决了问题。

您希望实现什么目标？。检查您的代码，您总是单击顶部图像，除非它们的大小不同，并且单击的图像可以拖动，这很好，但我希望您单击的图像位于顶部（z索引）。您可以随时单击图像，因为它没有完全覆盖，但它没有到达顶部。感谢您的帮助，刚刚尝试了这个，但仍然不起作用。在Safari、Chrome和Firefox中进行了尝试，并再次检查我是否加载了jQuery。还有其他建议吗？你应用过Number（）函数吗？