If I drag and drop one element, then everything works fine, but if I add more elements, then everything does not work correctly.
I want to re-render all the elements after drag and drop. I don't care about their order, as long as they are in the right columns.
Please tell me what I'm doing wrong.
const newTasks = document.querySelector('.trello__body--new')
const inProgress = document.querySelector('.trello__body--in-progress')
const completed = document.querySelector('.trello__body--completed')
const columns = document.querySelectorAll('.trello__body')
let currentDragItemID = null
const tasks = [
{ id: 1, text: 'Learn JS', status: 'new' },
{ id: 2, text: 'Learn React', status: 'new' },
{ id: 3, text: 'Learn TypeScript', status: 'new' },
{ id: 4, text: 'Learn Node.js', status: 'new' },
{ id: 5, text: 'Learn Next.js', status: 'new' },
]
const dragStart = event => {
currentDragItemID = parseInt(event.target.getAttribute('task-id'))
event.target.classList.add('trello__item--hide')
}
const dragEnd = event => (event.target.className = 'trello__item')
const columnDragOver = event => event.preventDefault()
const columnDragEnter = event => event.target.classList.add('trello__body--active')
const columnDragLeave = event => event.target.classList.remove('trello__body--active')
const columnDragDrop = event => {
const status = event.target.getAttribute('status')
const updatedTasks = tasks.map(task => {
if (task.id === currentDragItemID) {
return { ...task, status: status }
}
return task
})
event.target.classList.remove('trello__body--active')
render(updatedTasks)
}
function render(array) {
document.querySelectorAll('.trello__item').forEach(elem => elem.remove())
array.forEach(item => {
const task = document.createElement('div')
task.className = 'trello__item'
task.innerHTML = item.text
task.setAttribute('task-id', item.id)
task.draggable = true
switch (item.status) {
case 'new':
newTasks.append(task)
break
case 'in-progress':
inProgress.append(task)
break
case 'completed':
completed.append(task)
break
default:
break
}
task.addEventListener('dragstart', dragStart)
task.addEventListener('dragend', dragEnd)
})
}
render(tasks)
columns.forEach(item => {
item.addEventListener('dragover', columnDragOver)
item.addEventListener('dragenter', columnDragEnter)
item.addEventListener('dragleave', columnDragLeave)
item.addEventListener('drop', columnDragDrop)
})