javascript - 将一个元素置于具有相同 z-index 的其他元素之前

Question

用户可以按下按钮在屏幕上创建新的 div。每个 div 都是相同的并且具有相同的 z-index。较新的元素显示在较旧的元素前面。用户可以在元素周围拖动。我希望这样当用户拖动一个元素时，该元素现在永久位于其他元素的前面(直到创建/拖动另一个元素)。

是否可以在不跟踪 JS 中某处的 z-index 并在创建/单击时递增它的情况下执行此操作？如果可能的话，我想避免这种情况。有没有什么方法可以使用 jQuery 或其他东西让点击的元素看起来就像最近创建的一样(我猜这只是由 DOM 中的位置决定的？)

Answer 1

我假设你正在做类似的事情

container.appendChild(newDiv)

现在，当您点击并拖动一个元素时，您可以将它移到前面。

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

这会将您想要的 div 作为其父项的第一个子项插入，它将移动到顶部。

编辑:看起来 DOM 中后面的元素是显示在顶部的元素。在这种情况下，您可能想要附加子项。

recentlyClicked.parentElement.appendChild(recentlyClicked)