Как сохранять z-index в том порядке, в котором элементы наложены друг на друга?

Question

Написал пока вот так:

document.querySelectorAll('.item').forEach(el => {
  if (el !== e.target) el.style.zIndex = 0
  else el.style.zIndex = 1
})

что бы элемент, который я передвигаю, был выше тех, что находятся ниже в dom-дереве, но понятно, что вот эта строка: if (el !== e.target) el.style.zIndex = 0 убирает предыдущее значение когда я начинаю двигать другой элемент.

const wrapper = document.querySelector('body > div')

wrapper.onmousedown = e => {
  e.preventDefault()
  if (!e.target.classList.contains('item')) return

  document.querySelectorAll('.item').forEach(el => {
    if (el !== e.target) el.style.zIndex = 0
    else el.style.zIndex = 1
  })

  let tar = e.target
  let targetBox = tar.getBoundingClientRect()
  let x = 0
  let y = 0

  let shiftX = e.x - targetBox.left
  let shiftY = e.y - targetBox.top

  wrapper.onmousemove = e => {
    const prevX = tar.dataset.x ? tar.dataset.x : 0
    const prevY = tar.dataset.y ? tar.dataset.y : 0
    x = prevX - (e.x - shiftX - targetBox.left)
    y = prevY - (e.y - shiftY - targetBox.top)
    tar.style.transform = `translate(${-x}px, ${-y}px)`
  }

  wrapper.onmouseup = e => {
    tar.dataset.x = x
    tar.dataset.y = y
    wrapper.onmousemove = null
    wrapper.onmouseup = null
  }
}

* {
  margin: 0;
}

body>div {
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 2vw;
  grid-template-columns: repeat(3, 30%);
  background: lightblue;
}

div>div {
  background: white;
  width: 15vw;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  border: 1px solid black;
  user-select: none;
}

<div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Answer 1

var currentZIndex = 1;

  ...
  e.target.style.zIndex = 2000 + currentZIndex++;

const wrapper = document.querySelector('body > div')

var currentZIndex = 1;
wrapper.onmousedown = e => {
  e.preventDefault()
  if (!e.target.classList.contains('item')) return

  e.target.style.zIndex = 2000 + currentZIndex++;

  let tar = e.target
  let targetBox = tar.getBoundingClientRect()
  let x = 0
  let y = 0

  let shiftX = e.x - targetBox.left
  let shiftY = e.y - targetBox.top

  wrapper.onmousemove = e => {
    const prevX = tar.dataset.x ? tar.dataset.x : 0
    const prevY = tar.dataset.y ? tar.dataset.y : 0
    x = prevX - (e.x - shiftX - targetBox.left)
    y = prevY - (e.y - shiftY - targetBox.top)
    tar.style.transform = `translate(${-x}px, ${-y}px)`
  }

  wrapper.onmouseup = e => {
    tar.dataset.x = x
    tar.dataset.y = y
    wrapper.onmousemove = null
    wrapper.onmouseup = null
  }
}

* {
  margin: 0;
}

body>div {
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 2vw;
  grid-template-columns: repeat(3, 30%);
  background: lightblue;
}

div>div {
  background: white;
  width: 15vw;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  border: 1px solid black;
  user-select: none;
}

<div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

БЛОГ НА HUSL

Как сохранять z-index в том порядке, в котором элементы наложены друг на друга?

Ответы (1 шт):