將元素放在具有相同z-index的其他人面前

用戶可以按下按鈕在屏幕上創建新的div。每個div是相同的並且具有相同的z-索引。較舊的元素顯示在舊元素前面。用戶可以拖動元素。我希望這樣，當用戶拖拽一個元素時，該元素現在永久地位於其他元素的前面（直到創建/拖動不同的元素爲止）。將元素放在具有相同z-index的其他人面前

是否有可能做到這一點，而不跟蹤JS中某處的z-index，並在創建/點擊時增加它？如果可能，我想避免這種情況。有沒有一些方法，我可以使用jQuery或東西，使一個點擊的元素的行爲，就好像它是最近創建的（我猜是隻是位置在DOM確定？）

來源

2016-05-04 user3715648

我假設你正在做的事情一樣

container.appendChild(newDiv)

現在，當您單擊並拖動一個元素時，可以將其移動到前面。

var parent = recentlyClicked.parentElement // or container 
parent.insertBefore(recentlyClicked, parent.firstChild)

這會插入您想要的div作爲其父項的第一個子項，該子項將移至頂部。

編輯：看起來後面在DOM中的元素是頂部顯示的元素。在這種情況下，您可能會想要附加孩子。

recentlyClicked.parentElement.appendChild(recentlyClicked)

來源

2016-05-04 22:46:42 Strikeskids

我認爲元素具有相同的z-index，該元素最後在頂層的DOM層中。所以你可能想要.insertAfter而不是.insertBefore。我在這個問題上的答案是嘗試切換CSS類而不是調整DOM的排序。似乎沒有重新排序DOM元素（在簡單情況下很好）。 :) – timehat

問題中的信息表明DOM後面的元素顯示在底部。編輯：看起來你是對的 – Strikeskids

點擊你可以添加一個類到元素，CSS定位那個類有一個稍高的z-index。這可能是最乾淨的方法（不記錄z索引，只是在鼠標向上滑動鼠標時觸發該類的存在）

另一個想法（不確定它是否可以工作，但可能是有趣的嘗試）是爲所有元素添加一個tabindex =「0」，他們現在可以獲得焦點，然後在CSS中添加一個針對這些元素的「：focus」狀態選擇器，增加它們的z-index。不要記得是否鼠標焦點發生在鼠標下或完全點擊後，它可能會在你不想要的元素上帶來其他副作用線輪廓，並且混淆了你網站上tab鍵的可用性， d可能不會使用它，除非它在某種非生產環境下非常簡單

來源

2016-05-04 22:55:55 timehat

將元素放在具有相同z-index的其他人面前

回答

相關問題