JavaScript多個可拖動的DIV窗口，zIndex焦點

我有多個JavaScript可拖動的DIV窗口。點擊DIV時，我希望窗口獲得最高的Z-index值。我已經通過向焦點元素添加/刪除類來制定解決方案，但是，我希望窗口保留其「層」順序（就好像點擊時整個DIV窗口節點重新附加到DOM ）。JavaScript多個可拖動的DIV窗口，zIndex焦點

假設DOM中有五個DIV。 div1，div2，div3，div4和div5。 -div5最接近前面，div1位於後面，依此類推。

當點擊div1時，-div1將獲得焦點並放在前面，將div5設置回前一步。然後點擊div3，-div3最接近前面，div1和div5放回像這樣的一步：div2，div4，div5，div1，div3。

來源

2011-12-29 user1121487

如果你想做到這一點，而無需重新追加的元素，我的解決方案時，我寫了類似的話而回是跟蹤最大z索引。每當窗口提前時，最大z-索引都會增加，並且元素的z-索引將被設置爲新值。當然，如果有人用足夠的窗戶來攪拌，他們可能會得到非常大的z-索引值，所以這並不總是最好的解決方案。

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

來源

2011-12-29 23:22:47 Treip

這很好。 – user1121487 2012-01-02 14:10:25

如果你不想遍歷你所有的div並且不想搞亂z-index，你可以在拖動之前將div再次附加到父元素（body？）。

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

來源

2011-12-29 23:13:47 Luca

+1爲簡單起見。 – 2011-12-29 23:15:16

我試過這個，但是，這似乎刪除使用IE瀏覽器內的div內的點擊事件。這也會將div重置爲其默認狀態（在div中完成的更改，例如滾動或重置）。 – user1121487 2011-12-29 23:19:16

第一個也是最可能的最簡單的方法：每次選擇一個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-index，每次選擇不同的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 
     // ... 
    } 
});

來源

2011-12-29 23:36:21

這很好。我試過第一個例子，但沒有jQuery。 – user1121487 2012-01-02 14:10:10

JavaScript多個可拖動的DIV窗口，zIndex焦點

回答

相關問題