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

これが私の考えです。

$('.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 に答える
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);
};

これについていくつかの調査を行っている間、次のリンクは便利でした。4461z-index

于 2012-04-27T20:20:26.853 に答える