drag onto body

app.css

@@ -1,5 +1,9 @@
+body,html {
+	height:100%;
+}
 ul {
 	padding:0;
+	margin:0;
 }
 li {
 	padding:1em;
@@ -14,7 +18,7 @@ li {
 	list-style:none;
 }
 
-li.dragging {
+.dragging {
 	cursor:grabbing;
 	background-color:lightgrey;
 }

app.js

@@ -1,25 +1,26 @@
 let currentDraggedItem = null;
 
-const lis = document.querySelectorAll('li');
-for (li of lis) {
-	li.addEventListener('dragstart', (event)=>{
+const lisAndBody = document.querySelectorAll('li, body');
+for(const element of lisAndBody){
+	element.addEventListener('dragstart', (event)=>{
 		currentDraggedItem = event.target;
 	})
-	li.addEventListener('dragover', (event)=>{
+	element.addEventListener('dragover', (event)=>{
 		event.preventDefault()
 		event.target.classList.add('dragging');
 	})
-	li.addEventListener('dragleave', (event)=>{
+	element.addEventListener('dragleave', (event)=>{
 		event.target.classList.remove('dragging');
 	})
-	li.addEventListener('drop', (event)=>{
+	element.addEventListener('drop', (event)=>{
+		event.stopPropagation()
 		event.target.classList.remove('dragging');
 		event.target.children[1].appendChild(currentDraggedItem)
 	})
 }
 
 const deleteButtons = document.querySelectorAll('button');
-for (deleteButton of deleteButtons) {
+for (const deleteButton of deleteButtons) {
 	deleteButton.addEventListener('click', (event)=>{
 		event.target.parentNode.remove()
 	})

index.html

@@ -24,8 +24,6 @@
 			<button>Delete</button>
 			<ul></ul>
 		</li>
-	</ul>
-	<ul>
 		<li draggable="true">
 			four
 			<button>Delete</button>