Проблема с mousedown в draganddrop

подскажите, хочу сделать DnD и столкнулся с загвоздкой. создаются elem(посты) и на каждый навешивается слушатель событий, mousedownEvent, mousemoveEvent работают, mouseupEvent работает только если вышеупомянутые отключить. ЧТо я не так делаю?

let selectedItem = null
let createdItem = null

export function addMouselisteners(elem) {
  elem.addEventListener('mousedown', (e) => mousedownEvent(e))
  elem.addEventListener('mousemove', (e) => mousemoveEvent(e))
  elem.addEventListener('mouseleave', (e) => mouseleaveEvent(e))
  elem.addEventListener('mouseup', (e) => mouseupEvent(e))
}

function mousedownEvent(event) {
  event.preventDefault()
  if (event.which == 1) {
    selectedItem = event.currentTarget
    createdItem = selectedItem.cloneNode(true)
    createdItem.classList.add('dragged')
    document.body.append(createdItem)
    createdItem.style.left = `${event.pageX - createdItem.offsetWidth / 2}px`
    createdItem.style.top = `${event.pageY - createdItem.offsetHeight / 2}px`
  }
}

function mousemoveEvent(event) {
  event.preventDefault()
  if (!selectedItem) {
    return
  }
  createdItem.style.left = `${event.pageX - createdItem.offsetWidth / 2}px`
  createdItem.style.top = `${event.pageY - createdItem.offsetHeight / 2}px`
}

function mouseleaveEvent(event) {}

function mouseupEvent(event) {
  console.log('!')
}

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