Javascript 牌堆效果：拖动时将zIndex更改为所有类似div中的最高值

我试图在开始拖动时使用

z-index

将一个div放在所有类似div之上。我的尝试是有点工作，但当点击3的另一个div时，那个并没有在上面，而是在下面

// Handle start moving
const handleMoveStart = () => {
    const currentIndex = parseInt(document.defaultView.getComputedStyle(card).getPropertyValue('z-index'))
    const popupsAmount = document.querySelectorAll('.playingcard').length
    index = currentIndex + popupsAmount + 1
}

GIF可能更清晰：

---

无论我有多少个div，如何在拖动时始终将div放在“pile”的顶部？

问题似乎只是在增加z索引。如果你在一张牌上点击多次，你必须在其他牌上点击相同次数才能赶上他们。 在一个三张卡片的例子中，我会走相反的方向，让所有卡片0-2的z索引从三种状态之一开始。用唯一的数字初始化所有三张卡的z-index，单击一张卡时，使其z-index=2，如果不是0，则减少其他卡的z-index

编辑：我尝试这样做的原因是因为我自己在工作中也遇到了类似的z-index问题，我必须做大量的工作来解决我的问题。我没有足够的智慧来完善它：

---

谢谢您的回答！这很有趣，你不会想到的，是的，你对当前行为的看法是正确的——这并不理想。你能举个例子说明如何实现这一点吗？从代码角度来理解它有点棘手。

const cardZero = document.getElementById("cardZero");
const cardOne = document.getElementById("cardOne");
const cardTwo = document.getElementById("cardTwo");


$(document).ready(function() {

  // z-index initalize  
  cardZero.style.zIndex = 1;
  cardZero.innerHTML = cardZero.style.zIndex;

  cardOne.style.zIndex = 2;
  cardOne.innerHTML = cardOne.style.zIndex;

  cardTwo.style.zIndex = 3;
  cardTwo.innerHTML = cardTwo.style.zIndex;
})



function cardOnTop(c) {

  /* clicked card gets z=index of 3 */
  topCard = document.getElementById(c);

  /* if top card is already on top do nothing */
  if (topCard.style.zIndex != 3) {

    /* set cards */
    switch (c) {
      case 'cardZero':
        // fix cards one and two
        if (cardZero.style.zIndex == 1) {
          cardOne.style.zIndex--;
          cardTwo.style.zIndex--;
        } else {
          cardOne.style.zIndex = 1;
          cardTwo.style.zIndex = 2;
        }
        // set picked cardZero
        cardZero.style.zIndex = 3;
        break;

      case 'cardOne':
        // fix cards zero and two
        if (cardOne.style.zIndex == 1) {
          cardZero.style.zIndex--;
          cardTwo.style.zIndex--;
        } else {
          cardZero.style.zIndex = 1;
          cardTwo.style.zIndex = 2;
        }
        // set picked cardOne
        cardOne.style.zIndex = 3;
        break;

      case 'cardTwo':
        // fix cards zero and one
        if (cardTwo.style.zIndex == 1) {
          cardZero.style.zIndex--;
          cardOne.style.zIndex--;
        } else {
          cardZero.style.zIndex = 1;
          cardOne.style.zIndex = 2;
        }
        // set picked cardTwo
        cardTwo.style.zIndex = 3;
        break;

      default:
        cardTable.innerHTML = 'error !';
    }


    /* displays new style.z-index on card */
    cardZero.innerHTML = cardZero.style.zIndex;
    cardOne.innerHTML = cardOne.style.zIndex;
    cardTwo.innerHTML = cardTwo.style.zIndex;
  }

}