From fa88f2050b350fa391931fa589437f17e7f69b71 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@generalassemb.ly>
Date: Fri, 10 Nov 2023 11:05:23 -0500
Subject: [PATCH] drag onto body

---
 app.css    |  6 +++++-
 app.js     | 15 ++++++++-------
 index.html |  2 --
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app.css b/app.css
index 856edf2..ec01d7f 100644
--- a/app.css
+++ b/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;
 }
diff --git a/app.js b/app.js
index 8a76bd4..2049fc2 100644
--- a/app.js
+++ b/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()
 	})
diff --git a/index.html b/index.html
index e98f5fc..51a6282 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,6 @@
 			<button>Delete</button>
 			<ul></ul>
 		</li>
-	</ul>
-	<ul>
 		<li draggable="true">
 			four
 			<button>Delete</button>