Question

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

每个法师目前都是一个用于拖动的跨度元素 - 我是否需要将所有单个图像作为div元素才能使解决方案正常工作？我是否需要为每张图片应用初始z-index？（现在没有应用z索引）

以下是我使用

的代码

<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，任何适合解决方案的帮助都会非常感激。毫无疑问，我确定这是一件简单的事情

谢谢！

Answer 1

您的代码似乎没有特别提及您所说的尝试。只有一个图像，点击它只会返回false。双击它会显示下面隐藏的段落。（一般来说，人们不希望双击网页上的内容 - 我建议不要在大多数情况下使用它。）

那就是说，我想我理解你要求的东西，好消息是它真的很简单。这是一个显示其工作原理的小提琴：http://jsfiddle.net/ce5gw/2/

玩它并且你会看到它是如何工作的。三个红色块是设计成像图像的div;您可以用图片替换div.imgGoesHere元素。你会注意到你可以拖动它们，当你拖动它们时，你拖动的那个总是在顶部。拖动第一个div，使其部分位于第二个div之上。现在点击第二个，你会看到它弹出到前面，即使不必将它拖到任何地方。问题解决了。

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

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

我们开始让课程drag的所有内容成为可拖动的项目。它们被约束为仅在其父元素的空间内可拖动，即div.wrapper。您可以将其更改回＆＃34; window＆＃34;如果你更喜欢。这里最重要的是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的元素）这会查看类的每个项目{ {1}}，找到z-index最高的那个，并将被点击元素的新z-index设置为比该数字高一个。

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

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

1 个答案: