複数のドラッグ可能なDIVウィンドウ、フォーカスのzIndex

Question

複数のJavaScriptドラッグ可能なDIVウィンドウがあります。 DIVをクリックすると、ウィンドウが最高のz-インデックス値を取得します。私は、フォーカスの要素にクラスを追加/削除することで解決策を作りましたが、ウィンドウを "レイヤー"のままにしたい（DIVウィンドウノード全体がクリックされたときにDOMに再追加されたように）。

DOMに5つのDIVがあるとします。 div1、div2、div3、div4、およびdiv5。 -div5は正面に最も近く、div1は背面にあります。

div1をクリックすると、-div1はフォーカスを取得して前面に表示され、div5を1ステップ戻します。次にdiv3をクリックすると、-div3がfrontに最も近くなり、div1とdiv5はdiv2、div4、div5、div1、div3のように1ステップ戻ります。

Answer 1

あなたは再追加要素なしでこれを行うしたい場合は、私の解決策バックが最大のzインデックスを追跡するためにあったが、私は何か似たAを書きました。ウィンドウが前面に出るたびに、最大z-インデックスがインクリメントされ、エレメントのz-インデックスが新しい値に設定されます。もちろん、誰かがウィンドウを十分に使いこなすと、それらは非常に大きなz-index値を持つことになるかもしれないので、これは必ずしも最良の解決策ではありません。

var maximumZIndex = 1; 
var bringForward = function (element) { 
    maximumZIndex += 1; 
    element.style.zIndex = maximumZIndex; 
} 

Answer 2

すべてのdivをループしたくない場合、z-indexを使いこなしたくない場合は、ドラッグする前にdivを親要素（本文？）に追加するだけです。

function stepUpNode(elementDragged){ 
    var parentNode = elementDragged.parentNode; 
    parentNode.appendChild(elementDragged); 
} 

Answer 3

最も簡単なアプローチは、divを選択するたびに最大Z-インデックスを増加させることです。 （私の記憶が正しければ2147483647）のz-index値がかなり大きくなることができますので、あなたが最も可能性の高いレベルを使い果たすことは決してありません...

次のスニペットは、いくつかのjQueryを使用：あなたが持っている場合は

var frontmostWindow = null; 
var topZIndex = 10;  

$('div').click(function() { 
    if (this != frontmostWindow) { 
     frontmostWindow = this; 
     topZIndex++; 
     $(this).css('zLevel', topZIndex); 

     // anything else needed to acticate your div 
     // ... 
    } 
}); 

をあなたが使うことができるz-インデックスの制限は、別のdivが選択されるたびにレベルを再割り当てする必要があります。このように：

// store z-index-ordered divs in an array 
var divs = $('div').toArray().sort(function(a, b) { 
    return parseInt($(a).css('zIndex'), 10) - parseInt($(b).css('zIndex'), 10); 
}); 

// store available z-indices 
var zIndices = []; 
for (var i = 0; i < divs.length; ++i) { 
    zIndices.push($(divs[i]).css('zIndex')); 
} 

// Event listener for clicks 
$('div').click(function() { 
    alert("heyya " + this.id); 
    var element = this; 

    var index = divs.indexOf(element); 
    // check if clicked element is not already the frontmost 
    if (index < divs.length - 1) { 
     // remove div from array and insert again at end 
     divs.splice(index, 1); 
     divs.push(this); 

     // re-assign stored z-indices for new div order 
     for (var i = 0; i < divs.length; ++i) { 
      $(divs[i]).css('zIndex', zIndices[i]); 
     } 

     // anything else needed to acticate your div 
     // ... 
    } 
});