使用 jquery 处理 z-index

Posted 2023-05-08

【中文标题】使用 jquery 处理 z-index

【英文标题】：working on z-index using jquery

【发布时间】：2012-05-07 19:21:47

【问题描述】：

我正在开发一个能够在页面上创建/添加新元素的网站。我想对页面上添加的每个元素的 z-index 进行控制。这样我就可以将一个 div 放在另一个 div 之上。

<div class="element ui-resizable ui-draggable" style="z-index:10000">
  <div id="controller">
    <a href="#" class="zup"> move up </a>
    <a href="#" class="zdown"> move down </a>
  </div>
  <div class="content">
    some text content her
  </div>
</div>

javascript

$('.zup').click(function() 
  $cur_zindex = $(this).parents('.element').css('zIndex');
  $(this).parents('.element').css( zIndex: $cur_zindex+1 )
)

$('.zdown').click(function() 
  $cur_zindex = $(this).parents('.element').css('zIndex');
  $(this).parents('.element').css( zIndex: $cur_zindex-1 )
)

问题是当我多次单击元素的“上移”时，我还需要多次单击“下移”才能使当前元素位置在后面。那是因为我多次单击时 z-index 上的差距。

简而言之，我想为用户提供一种简单的方法来设置 z 索引，无论您单击多少“上移”，然后如果有人在另一个元素上单击“上移”，它将自动位置在多次点击的 zindex 的顶部/上移

非常欢迎任何建议。

谢谢

【问题讨论】：

所有元素最初都添加到同一个 z-index 上吗？如果是这样，您可以将所有元素重置为该索引，然后将用户希望向上移动的元素增加一。

所有元素最初都有相同的z-index，“是”，但是当用户开始重新排列元素位置时我想保留它，因为页面上可能有超过20个元素..谢谢你的回复。

有一个变量存储下一个要使用的 z-index，当一个元素被点击移动到顶部时，使用变量中的存储索引，然后为下一个增加它。这将确保元素位于顶部。

【参考方案1】：

这是我的想法。

$('.zup').click(function () 
  var max_zindex = -10000;
  $('.zup').each(function () 
    if ($(this).css('zIndex') > max_zindex)  max_zindex = $(this).css('zIndex'); 
  );

  // If we don't already have the max_zindex, then set the zindex to the max + 1
  // Notice that if the element clicked does have the max zindex, nothing happens.
  if (max_zindex != $(this).css('zIndex')) 
    $(this).css('zIndex', max_zindex + 1);
  
);


$('.zdown').click(function () 
  var min_zindex = 10000;
  $('.zup').each(function () 
    if ($(this).css('zIndex') < min_zindex)  min_zindex = $(this).css('zIndex'); 
  );

  if (min_zindex != $(this).css('zIndex')) 
    $(this).css('zIndex', min_zindex + 1);
  
);

【讨论】：

谢谢这个，我会试试的

不适用于 Max，它为我的元素提供了 -9999 z-index 值，导致元素消失。顺便说一句，我稍微修改了这个问题以使其清楚。谢谢

【参考方案2】：

所以我的方法有点不同，因为有 4 个控件（上/下/上/下）。我想不出一种方法可以将元素向上或向下移动 1 个增量或跳到堆栈的顶部或底部。我创建了一个demo，单击+ 或- 后，您可以在每个元素上看到z-index。可以添加更多元素来玩弄。

这可能不是您所追求的解决方案，但我希望它有所帮助。小提琴中的代码重复如下：

html

<a href="#" id="add">add element</a>
<div id="elements">
    <div class="element ui-draggable">
      <div class="controller">
        <a href="#" class="top">⇈</a>
        <a href="#" class="zup">+</a>
        <a href="#" class="zdown">-</a>
        <a href="#" class="bottom">⇊</a>
      </div>
      <div class="content">lorum ipsum</div>
      <div class="zIndex"></div>
    </div>
</div>​

CSS

.element 
    background-color:lightblue;
    border:1px solid darkblue;
    width:96px;
    height:96px;
    padding:2px;
    z-index:0;


.content 
    margin-top:4px;


.controller a 
    margin:0 4px;
    text-decoration:none;


.zIndex 
    position:absolute;
    right:0;
    bottom:0
​

JavaScript （针对 jquery 1.7.2 运行）

$('#add').on('click', function() 
    var $clone = $('.element:first')
                 .clone()
                 .attr('id', 'e' + $('.element').length++)
                 .draggable();

    $('#elements').append($clone);
    return false;
);

$('#elements').on('click', 'a', function() 
    var $element = $(this).closest('.element');
    var $siblings = $element.siblings();
    var zIndexes = $siblings.map(function() 
        return $(this).css('z-index');
    );

    var zIndex = parseInt($element.css('z-index'));

    switch(this.className) 
        case 'top':
            zIndex = Array.max(zIndexes) + 1;
            break;
        case 'zup':
             zIndex += 1;
            break;
        case 'zdown':
            zIndex -= 1;
            break;
        case 'bottom':
            zIndex = Array.min(zIndexes) - 1;
            break;
    

    // workaround for negative z-index madness (simply set lowest as 0 and raise everything else by 1)
    if (zIndex === -1) 
        zIndex = 0;
        $siblings.each(function() 
            var z = parseInt($(this).css('z-index')) + 1;
            $(this).css('z-index', z);
            $(this).find('.zIndex').text(z);
        );
    

    $element.css(zIndex:zIndex);
    $element.find('.zIndex').text(zIndex);
    return false;
);

$('.element').draggable();

Array.max = function(array) 
    return Math.max.apply(Math, array);
;

Array.min = function(array) 
    return Math.min.apply(Math, array);
;

在为此做一些研究的同时，以下链接很有用Setting z-index on draggable elements、jQuery min/max property from array of elements 尤其是（对于负面的z-index 问题）http://bugs.jqueryui.com/ticket/4461