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 {
+ul.dragging {
-	padding:0px;
+	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">
-		<li draggable="true">two</li>
+			one
-		<li draggable="true">three</li>
+			<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">
-		<li draggable="true">five</li>
+			one
-		<li draggable="true">six</li>
+			<ul></ul>
 		</li>
 		<li draggable="true">
 			one
 			<ul></ul>
 		</li>
 	</ul>
 </body>
 </html>