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.
43 lines
1.3 KiB
43 lines
1.3 KiB
let currentDraggedItem = null;
|
|
|
|
const lisAndBody = document.querySelectorAll('li, body');
|
|
for(const element of lisAndBody){
|
|
element.addEventListener('dragstart', (event)=>{
|
|
currentDraggedItem = event.target;
|
|
})
|
|
element.addEventListener('dragover', (event)=>{
|
|
event.preventDefault()
|
|
event.target.classList.add('dragging');
|
|
})
|
|
element.addEventListener('dragleave', (event)=>{
|
|
event.target.classList.remove('dragging');
|
|
})
|
|
element.addEventListener('drop', (event)=>{
|
|
event.stopPropagation()
|
|
event.target.classList.remove('dragging');
|
|
event.target.children[0].appendChild(currentDraggedItem)
|
|
})
|
|
}
|
|
|
|
const deleteItem = (event)=>{
|
|
event.target.parentNode.remove()
|
|
}
|
|
|
|
const deleteButtons = document.querySelectorAll('button.delete');
|
|
for (const deleteButton of deleteButtons) {
|
|
deleteButton.addEventListener('click', deleteItem)
|
|
}
|
|
|
|
const createNewItem = (event)=>{
|
|
const template = document.querySelector('template').content.children[0];
|
|
const newItem = template.cloneNode(true)
|
|
newItem.children[1].addEventListener('click',createNewItem);
|
|
newItem.children[3].addEventListener('click',deleteItem);
|
|
event.target.parentNode.children[0].appendChild(newItem)
|
|
}
|
|
|
|
const addButtons = document.querySelectorAll('button.add');
|
|
for (const addButton of addButtons) {
|
|
addButton.addEventListener('click',createNewItem);
|
|
}
|