В JavaScript есть ли способ изменить значения z-Index элементов html, как если бы они были числами, а не строками?

Question

Я новичок в JavaScript. У меня на веб-сайте есть несколько перетаскиваемых элементов div, которые выглядят и ведут себя как карты на столе. Когда элемент щелкают и перетаскивают, его z-индекс изменяется на самое верхнее положение, в то время как z-индексы других элементов перемещаются на 1 позицию вниз. Это сохраняет все элементы в правильном порядке, в котором они были размещены пользователем, так что когда они складываются и перемещаются, это выглядит естественно.

Приведенный ниже код плавно работает с 3 элементами, в которых я вручную проверяю и изменяю каждое значение zIndex с помощью операторов if, но этот метод становится экспоненциально более сложным, поскольку я добавляю больше перетаскиваемых элементов (план должен иметь при минимум 10). I wi sh Я мог бы просто вычесть 1 из zIndex всех других перетаскиваемых элементов. Я не могу, потому что zIndex - это строковое значение, а не число. Есть ли способ обойти это? Способ обработки строковых значений как чисел, чтобы я мог выполнять арифметические операции c, может быть? Любая помощь будет принята с благодарностью.

Примечание: приведенный ниже код является частью функции перетаскивания элемента, которая конкретно касается элемента «card1», я не включил все это целиком, так как это единственная часть, которая имеет дело с zIndex

//change the zIndexes when card1 is moved

elmnt.style.zIndex = "3"; //places card1 on top

//check zIndex positions of card2 and card3 and lower them by 1
    if (document.getElementById("card2").style.zIndex == "3"){
        if (document.getElementById("card3").style.zIndex == "2"){
            document.getElementById("card3").style.zIndex = "1";
            document.getElementById("card2").style.zIndex = "2";
        }
        else {
            document.getElementById("card2").style.zIndex = "2";
        }
    }
      
    if (document.getElementById("card3").style.zIndex == "3"){
        if (document.getElementById("card2").style.zIndex == "2"){
            document.getElementById("card2").style.zIndex = "1";
            document.getElementById("card3").style.zIndex = "2";
        }
        else {
            document.getElementById("card3").style.zIndex = "2";
        }
    }