You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.5 KiB
52 lines
1.5 KiB
// TODO: reorder
|
|
let currentDraggedItem = null;
|
|
|
|
const attachDragEvents = (element)=>{
|
|
element.addEventListener('dragstart', (event)=>{
|
|
currentDraggedItem = event.target;
|
|
})
|
|
element.addEventListener('dragover', (event)=>{
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
event.currentTarget.classList.add('draggedOver');
|
|
})
|
|
element.addEventListener('dragleave', (event)=>{
|
|
event.currentTarget.classList.remove('draggedOver');
|
|
})
|
|
element.addEventListener('drop', (event)=>{
|
|
event.stopPropagation()
|
|
event.currentTarget.classList.remove('draggedOver');
|
|
event.currentTarget.querySelector('ul').appendChild(currentDraggedItem)
|
|
})
|
|
}
|
|
|
|
const deleteItem = (event)=>{
|
|
event.currentTarget.closest('li').remove()
|
|
}
|
|
|
|
const updateItem = (event)=>{
|
|
event.preventDefault()
|
|
const newValue = event.currentTarget.parentNode.querySelector('input').value
|
|
event.currentTarget.closest('li').querySelector('h2').innerHTML = newValue
|
|
}
|
|
|
|
const createNewItem = (event)=>{
|
|
const template = document.querySelector('template').content.querySelector('li');
|
|
const newItem = template.cloneNode(true)
|
|
|
|
newItem.querySelector('.add').addEventListener('click',createNewItem);
|
|
newItem.querySelector('.delete').addEventListener('click',deleteItem);
|
|
newItem.querySelector('form').addEventListener('submit',updateItem);
|
|
attachDragEvents(newItem)
|
|
|
|
if(event){
|
|
event.currentTarget.closest('li').querySelector('ul').appendChild(newItem)
|
|
} else {
|
|
document.querySelector('ul').appendChild(newItem)
|
|
}
|
|
}
|
|
|
|
for(let i = 0; i < 5; i++){
|
|
createNewItem()
|
|
}
|