可拖动并点击到前面答案

【问题标题】：Draggable and click to front可拖动并点击到前面
【发布时间】：2013-07-30 14:02:14
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

你到底想达到什么目的？检查您的代码，您总是单击顶部的图像，除非它们的大小不同并且被单击的图像会冒泡
我有可拖动的图像，效果很好，但我希望您点击的图像位于顶部（z-index）。您可以随时单击图像，因为它没有被完全覆盖，但不会出现在顶部。

标签： jquery jquery-ui z-index draggable

【解决方案1】：

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

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

});

【讨论】：

感谢您的帮助，刚刚试了一下，还是不行。已经在 Safari、Chrome 和 Firefox 中尝试过，并仔细检查了我是否加载了 jQuery。还有其他建议吗？
你应用了 Number() 函数吗？

【解决方案2】：

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

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

【讨论】：