Commit 01e152c

committed

Drag n Drop

1 parent d2fb017 commit 01e152cCopy full SHA for 01e152c

File tree

+101

-0

lines changed

+101

-0

lines changed

Lines changed: 40 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,40 @@`
	`1`	`+const fill = document.querySelector(".fill");`
	`2`	`+const empties = document.querySelectorAll(".empty");`
	`3`	`+`
	`4`	`+fill.addEventListener("dragstart", dragStart);`
	`5`	`+fill.addEventListener("dragend", dragEnd);`
	`6`	`+`
	`7`	`+for (const empty of empties) {`
	`8`	`+ empty.addEventListener("dragover", dragOver);`
	`9`	`+ empty.addEventListener("dragenter", dragEnter);`
	`10`	`+ empty.addEventListener("dragleave", dragLeave);`
	`11`	`+ empty.addEventListener("drop", dragDrop);`
	`12`	`+}`
	`13`	`+`
	`14`	`+function dragStart() {`
	`15`	`+ setTimeout(() => {`
	`16`	`+ this.className = "invisible";`
	`17`	`+ }, 0);`
	`18`	`+}`
	`19`	`+`
	`20`	`+function dragEnd() {`
	`21`	`+ this.className = "fill";`
	`22`	`+}`
	`23`	`+`
	`24`	`+function dragOver(e) {`
	`25`	`+ e.preventDefault();`
	`26`	`+}`
	`27`	`+`
	`28`	`+function dragEnter(e) {`
	`29`	`+ e.preventDefault();`
	`30`	`+ this.className += " hovered";`
	`31`	`+}`
	`32`	`+`
	`33`	`+function dragLeave() {`
	`34`	`+ this.className = "empty";`
	`35`	`+}`
	`36`	`+`
	`37`	`+function dragDrop() {`
	`38`	`+ this.className = "empty";`
	`39`	`+ this.append(fill);`
	`40`	`+}`

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,21 @@`
	`1`	`+<html lang="en">`
	`2`	`+ <head>`
	`3`	`+ <meta charset="UTF-8" />`
	`4`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <title>Drag n Drop</title>`
	`7`	`+ <link rel="stylesheet" href="style.css" />`
	`8`	`+ </head>`
	`9`	`+ <body>`
	`10`	`+ <div class="empty">`
	`11`	`+ <div class="fill" draggable="true"></div>`
	`12`	`+ </div>`
	`13`	`+`
	`14`	`+ <div class="empty"></div>`
	`15`	`+ <div class="empty"></div>`
	`16`	`+ <div class="empty"></div>`
	`17`	`+ <div class="empty"></div>`
	`18`	`+`
	`19`	`+ <script src="app.js"></script>`
	`20`	`+ </body>`
	`21`	`+</html>`

Lines changed: 40 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,40 @@`
	`1`	`+* {`
	`2`	`+ box-sizing: border-box;`
	`3`	`+}`
	`4`	`+`
	`5`	`+body {`
	`6`	`+ background-color: rgb(14, 13, 13);`
	`7`	`+ display: flex;`
	`8`	`+ justify-content: center;`
	`9`	`+ align-items: center;`
	`10`	`+ height: 100vh;`
	`11`	`+ overflow: hidden;`
	`12`	`+ margin: 0;`
	`13`	`+}`
	`14`	`+`
	`15`	`+.empty {`
	`16`	`+ height: 200px;`
	`17`	`+ width: 200px;`
	`18`	`+ margin: 10px;`
	`19`	`+ border: 3px solid white;`
	`20`	`+ background: white;`
	`21`	`+}`
	`22`	`+`
	`23`	`+.fill {`
	`24`	`+ background-image: url("http://source.unsplash.com/random/200x200");`
	`25`	`+ height: 195px;`
	`26`	`+ width: 195px;`
	`27`	`+ cursor: pointer;`
	`28`	`+}`
	`29`	`+`
	`30`	`+/* JavaScript */`
	`31`	`+.hovered {`
	`32`	`+ background-color: green;`
	`33`	`+ border: 3px dashed white;`
	`34`	`+}`
	`35`	`+`
	`36`	`+@media (max-width: 800px) {`
	`37`	`+ body {`
	`38`	`+ flex-direction: column;`
	`39`	`+ }`
	`40`	`+}`

Comments

(0)