Question

我正在使用Jquery＆amp; JqueryUI使站点上的某些元素可以拖动，我希望它们在点击时出现在前面，但是我遇到了问题 - draggable工作得很好，但是每个元素（.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

您的代码正常运行。尝试重新排列代码，如下所示：

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

});

Answer 2

.click（）事件在某种程度上遇到了.draggable的问题 - 必须单击并按住代码才能运行并将元素置于顶部。

用.mousedown（）替换了.click（）并修复了问题。

可拖动并单击到前面

2 个答案: