具有交替 z 索引的图像 JQuery UI答案

【问题标题】：Images with alternating z-indexes JQuery UI具有交替 z 索引的图像 JQuery UI
【发布时间】：2013-02-22 10:13:55
【问题描述】：

我发现了另一个具有类似问题的问题，但无法确定如何应用该解决方案。我的网页是相互重叠的可拖动图像的简单组合。我只想要一张图片在点击时显示在其他图片之上。

每个法师当前都充当用于拖动的 span 元素 - 我是否需要将所有单独的图像作为 div 元素才能使解决方案发挥作用？我需要对每个图像应用初始 z-index 吗？（目前没有应用 z-index）

这是我正在使用的代码

<div id="wrapper">

<span id="drag" style=""><a href="javascript:void(0)" id="paragraphAnchor">    
<img src="images/logoweb.png" width="198" height="198" style="" /></a></span>

<div id="text">   

<p id='a'>

<span style="background:#0C6;">

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   
<br/><br/>


<a href="#">website</a>

<br/><br/>

<a href="javascript:void(0)" id="paragraphAnchor5">close</a>


</p>

</span>

以及每个元素的 JQuery

$(document).ready(function()

                        {

                            $('#drag').draggable( { containment: 'window' } );/*.resizable();*/






                        });

 $(document).ready(function()
                       {

                        $('p#a').hide();
                        $('p#b').hide();


                        $('a#paragraphAnchor') .click(function() {
                             return false;
                              }).dblclick(function() 

                                                             {

                                                                 $('p#a').slideToggle('slow');
                                                                 $('p#b').hide();


                                                             });

这是我为类似查询Changing z-index to make a clicked div appear on top 找到的代码。我一直在尝试将解决方案集成到我自己的代码中，但不知道我哪里出错了。这可能是我混淆的元素或错误的编码

刚开始使用 JQuery，非常感谢任何适合该解决方案的帮助。毫无疑问，这很简单

谢谢！

【问题讨论】：

标签： jquery-ui z-index draggable

【解决方案1】：

您的代码似乎没有特别提到您所说的要执行的操作。只有一张图片，点击它只会返回 false。双击它会使下面的隐藏段落出现。（一般来说，人们不希望双击网页上的东西 - 我建议在大多数情况下不要使用它。）

也就是说，我想我理解您的要求，而且好消息是它真的很简单。这是一个展示它是如何工作的小提琴：http://jsfiddle.net/ce5gw/2/

试一试，你会看到它是如何工作的。三个红色块是 div，旨在充当图像；您可以用您的图像替换 div.imgGoesHere 元素。你会注意到你可以拖动它们，当你拖动它们时，你拖动的那个总是在顶部。拖动第一个 div 使其部分位于第二个 div 之上。现在单击第二个，您会看到它弹出到前面，即使无需将其拖动到任何地方。问题解决了。

现在我将引导您完成代码。

   $('.drag').draggable({
        containment: 'parent',
        stack: '.drag'
    })

我们开始将 drag 类的所有内容都设为可拖动项目。它们被限制为只能在其父元素的空间内拖动，即div.wrapper。如果您愿意，可以将其改回“窗口”。这里最重要的是stack: '.drag'。这样设置后，当您拖动一个项目时，它始终会显示在 z 顺序中 drag 类的项目之上。

但是当你不想拖动一个项目时，你只想让它在你点击它时弹出到前面呢？这就是下一个块的作用。

   .on('click', function () {
        var el = $(this), // The image that was clicked
        max = 0;
        // Find the highest z-index
        $('.drag').each(function () {
            // Find the current z-index value
            var z = parseInt($(this).css("z-index"), 10);
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max(max, z);
        });
        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1);
    });

这直接来自您链接到的另一个问题，并且在那里得到了很好的解释。任何时候单击drag 类的元素（这链接到上面的第一个声明，所以我们仍然在这里讨论drag 类的元素）这会查看drag 类的每个项目，找到那个具有最高 z-index，并将被点击元素的新 z-index 设置为比该数字高 1。

如果您对此有任何疑问，请务必告诉我。

【讨论】：