issues with bubbling/body

app.css

@@ -27,7 +27,7 @@ li {
 	list-style:none;
 }
 
-body.dragging, li.dragging {
+li.draggedOver {
 	cursor:grabbing;
 	background-color:lightgrey;
 }

app.js

@@ -1,32 +1,33 @@
 // TODO: reorder
 let currentDraggedItem = null;
 
-const lisAndBody = document.querySelectorAll('li, body');
+const attachDragEvents = (element)=>{
-for(const element of lisAndBody){
 	element.addEventListener('dragstart', (event)=>{
 		currentDraggedItem = event.target;
 	})
 	element.addEventListener('dragover', (event)=>{
 		event.preventDefault()
-		event.target.classList.add('dragging');
+		event.stopPropagation()
+		event.currentTarget.classList.add('draggedOver');
 	})
 	element.addEventListener('dragleave', (event)=>{
-		event.target.classList.remove('dragging');
+		event.currentTarget.classList.remove('draggedOver');
 	})
 	element.addEventListener('drop', (event)=>{
-		event.target.classList.remove('dragging');
+		event.stopPropagation()
-		event.target.querySelector('ul').appendChild(currentDraggedItem)
+		event.currentTarget.classList.remove('draggedOver');
+		event.target.closest('li').querySelector('ul').appendChild(currentDraggedItem)
 	})
 }
 
 const deleteItem = (event)=>{
-	event.target.parentNode.remove()
+	event.currentTarget.closest('li').remove()
 }
 
 const updateItem = (event)=>{
 	event.preventDefault()
-	const newValue = event.target.parentNode.querySelector('input').value
+	const newValue = event.currentTarget.parentNode.querySelector('input').value
-	event.target.parentNode.querySelector('h2').innerHTML = newValue
+	event.currentTarget.closest('li').querySelector('h2').innerHTML = newValue
 }
 
 const createNewItem = (event)=>{
@@ -36,9 +37,10 @@ const createNewItem = (event)=>{
 	newItem.querySelector('.add').addEventListener('click',createNewItem); 
 	newItem.querySelector('.delete').addEventListener('click',deleteItem);
 	newItem.querySelector('form').addEventListener('submit',updateItem);
+	attachDragEvents(newItem)
 
 	if(event){
-		event.target.parentNode.querySelector('ul').appendChild(newItem)
+		event.currentTarget.parentNode.querySelector('ul').appendChild(newItem)
 	} else {
 		document.querySelector('ul').appendChild(newItem)
 	}

index.html

@@ -13,8 +13,11 @@
 		<li draggable="true">
 			<h2>Placeholder</h2>
 			<details>
-				<summary>children/actions</summary>
+				<summary>children</summary>
 				<ul></ul>
+			</details>
+			<details>
+				<summary>actions</summary>
 				<button class="add">Add</button>
 				<button class="delete">Delete</button>
 				<form>