Question

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

的顶部

非常欢迎任何建议。

谢谢

Answer 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);
  }
});

Answer 2

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

这可能不是你想要的解决方案，但我希望它有所帮助。下面的小提琴代码重复：

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

使用jquery处理z-index

2 个答案:

HTML

CSS

JavaScript （针对jquery 1.7.2运行）