1

我正在开发一个能够在页面上创建/添加新元素的网站。我想对页面上添加的每个元素的 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/向上移动的顶部

任何建议都非常受欢迎。

谢谢

4

2 回答 2

0

所以我的方法有点不同，因为有 4 个控件（上/下/上/下）。我想不出一种方法可以将元素向上或向下移动 1 个增量或跳到堆栈的顶部或底部。我做了一个演示，您可以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">⇈&lt;/a>
        <a href="#" class="zup">+</a>
        <a href="#" class="zdown">-</a>
        <a href="#" class="bottom">⇊&lt;/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);
};

在为此进行一些研究时，以下链接很有用在可拖动元素上设置 z-index ，元素数组中的 jQuery min/max 属性，特别是（对于负面z-index问题）http://bugs.jqueryui.com/ticket/ 4461

于 2012-04-27T20:20:26.853 回答
0

这是我的想法。

$('.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);
  }
});
于 2012-04-27T02:42:26.310 回答