| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Drag and drop</title> | |
| <style> | |
| body{ | |
| background-color: red; | |
| } | |
| .header h1{ | |
| text-align: center; | |
| color: white; | |
| background-color: black; | |
| border-radius: 10px; | |
| padding: 5px; | |
| } | |
| .header p{ | |
| text-align: center; | |
| color: rgb(219, 139, 33); | |
| background-color: rgb(100, 9, 70); | |
| border-radius: 10px; | |
| padding: 5px; | |
| font-size: 20px; | |
| } | |
| .boxes{ | |
| display: flex; | |
| width: 100%; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .imgBox{ | |
| background: url('profile1.jpg'); | |
| background-size: cover; | |
| position: relative; | |
| top: 0px; | |
| left: 0px; | |
| height: 155px; | |
| width: 155px; | |
| cursor: pointer; | |
| } | |
| .whiteBox{ | |
| display: inline-block; | |
| height: 155px; | |
| width: 155px; | |
| background-color: yellow; | |
| margin: 10px; | |
| border: 2px solid black; | |
| border-radius: 3px; | |
| } | |
| /* utility classes */ | |
| .hold{ | |
| border: 4px solid red; | |
| } | |
| .hide{ | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Making Drag and Drop</h1> | |
| <p>Please use the mouse to drag and drop the image</p> | |
| </div> | |
| <div class="boxes"> | |
| <div class="whiteBox"> | |
| <div class="imgBox" draggable="true"></div> | |
| </div> | |
| <div class="whiteBox"></div> | |
| <div class="whiteBox"></div> | |
| <div class="whiteBox"></div> | |
| </div> | |
| <script> | |
| const imgBox = document.querySelector('.imgBox'), | |
| whiteBox = document.getElementsByClassName('whiteBox') | |
| imgBox.addEventListener('dragstart',(e)=>{ | |
| e.target.className += ' hold' | |
| setTimeout(()=>{ | |
| e.target.className = 'hide' | |
| },0) | |
| }) | |
| imgBox.addEventListener('dragend',(e)=>{ | |
| e.target.className = 'imgBox' | |
| }) | |
| //for of loop | |
| for(items of whiteBox){ | |
| items.addEventListener('dragover',(e)=>{ | |
| e.preventDefault(); | |
| }) | |
| items.addEventListener('dragenter',(e)=>{ | |
| // e.preventDefault(); | |
| }) | |
| items.addEventListener('dragleave',(e)=>{ | |
| // e.preventDefault(); | |
| }) | |
| items.addEventListener('drop',(e)=>{ | |
| // e.preventDefault(); | |
| e.target.append(imgBox) | |
| //using this step and drop event listener | |
| // we can drop the image from one box to another | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |
No comments:
Post a Comment