0

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

每个法师当前都用作拖动的跨度元素 - 我是否需要将所有单独的图像作为 div 元素才能使解决方案起作用？我需要对每个图像应用初始 z-index 吗？（现在没有应用 z-indexes）

这是我正在使用的代码

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


                                                             });

这是我为类似查询更改 z-index 以使单击的 div 出现在 top 上找到的代码。我一直在尝试将解决方案集成到我自己的代码中，但不知道我哪里出错了。这可能是我混淆的元素或错误的编码

刚开始使用 JQuery，任何适合解决方案的帮助都将非常感激。我敢肯定，毫无疑问，这很简单

谢谢 ！

4

1 回答 1

0

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

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

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

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

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

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

但是当你不想拖动一个项目时，你只是希望它在单击时弹出到前面呢？这就是下一个块所做的。

   .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单击 class 的元素（这链接到上面的第一个声明，所以我们仍然在drag这里讨论 class 的元素）这会查看 class 的每个项目drag，找到具有最高 z-index 的项目，并设置单击的元素的新 z-index 比该数字大一。

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

于 2013-02-22T16:23:22.850 回答