dragging highlights

2 years ago · 864fa961fa
parent 7becf28cd3
commit 864fa961fa
3 changed files with 37 additions and 11 deletions
--- a/app.css
+++ b/app.css
@ -1,12 +1,14 @@
-ul {
-	padding:0px;
+ul.dragging {
+	border-color:red;
+}
+ul, li {
+	padding:1em;
+	border:1px solid black;
+	margin:1em;
 }

 li {
 	cursor:grab;
-	border:1px solid black;
-	padding: 1em;
-	margin: 1em;
 	list-style:none;
 }

--- a/app.js
+++ b/app.js
@ -0,0 +1,10 @@
+const uls = document.querySelectorAll('ul');
+
+for (ul of uls) {
+	ul.addEventListener('dragover', (event)=>{
+		event.target.classList.add('dragging');
+	})
+	ul.addEventListener('dragleave', (event)=>{
+		event.target.classList.remove('dragging');
+	})
+}
--- a/index.html
+++ b/index.html
@ -9,14 +9,28 @@
 <body>
 	<h1>New Trello</h1>
 	<ul>
-		<li draggable="true">one</li>
-		<li draggable="true">two</li>
-		<li draggable="true">three</li>
+		<li draggable="true">
+			one
+			<ul></ul>
+		</li>
+		<li draggable="true">
+			one
+			<ul></ul>
+		</li>
+		<li draggable="true">
+			one
+			<ul></ul>
+		</li>
 	</ul>
 	<ul>
-		<li draggable="true">four</li>
-		<li draggable="true">five</li>
-		<li draggable="true">six</li>
+		<li draggable="true">
+			one
+			<ul></ul>
+		</li>
+		<li draggable="true">
+			one
+			<ul></ul>
+		</li>
 	</ul>
 </body>
 </html>