visually removing uls

app.css

@@ -1,7 +1,7 @@
-ul.dragging {
-	border-color:red;
+ul {
+	padding:0;
 }
-ul, li {
+li {
 	padding:1em;
 	border:1px solid black;
 	margin:1em;
@@ -12,8 +12,9 @@ li {
 	list-style:none;
 }
 
-li:active {
+li.dragging {
 	cursor:grabbing;
 	border-color:red;
+	border-color:red;
 	color:red;
 }

app.js

@@ -1,23 +1,21 @@
 let currentDraggedItem = null;
 
-const uls = document.querySelectorAll('ul');
-for (ul of uls) {
-	ul.addEventListener('dragover', (event)=>{
+const lis = document.querySelectorAll('li');
+for (li of lis) {
+	li.addEventListener('dragstart', (event)=>{
+		currentDraggedItem = event.target;
+		event.target.classList.add('dragging');
+	})
+	li.addEventListener('dragover', (event)=>{
 		event.preventDefault()
+		event.stopPropagation()
 		event.target.classList.add('dragging');
 	})
-	ul.addEventListener('dragleave', (event)=>{
+	li.addEventListener('dragleave', (event)=>{
 		event.target.classList.remove('dragging');
 	})
-	ul.addEventListener('drop', (event)=>{
+	li.addEventListener('drop', (event)=>{
 		event.target.classList.remove('dragging');
-		event.target.appendChild(currentDraggedItem)
-	})
-}
-
-const lis = document.querySelectorAll('li');
-for (li of lis) {
-	li.addEventListener('dragstart', (event)=>{
-		currentDraggedItem = event.target;
+		event.target.children[0].appendChild(currentDraggedItem)
 	})
 }