-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit df8eb41
Showing
1 changed file
with
76 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title></title> | ||
| <meta name="description" content=""> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | ||
| integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | ||
| <style> | ||
| p { | ||
| color:aliceblue; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="bg-dark"> | ||
| <div class="container text-center"> | ||
| <div class="row my-5 gap-3 justify-content-center"> | ||
| <!-- Used bootrap classesfor responsive containers --> | ||
| <div class="col-md-5 bg-light rounded p-3"> | ||
| <h3>Drag from here</h3><hr style="height: 3px; background: black;"> | ||
| <!-- home container is the one that contains the items initially, considered bootstrap icons --> | ||
| <div id="home" class="p-3"> | ||
| <i class="bi bi-1-square m-1" draggable="true" ondragstart="drag(event)"></i> | ||
| <i class="bi bi-2-square m-1" draggable="true" ondragstart="drag(event)"></i> | ||
| <i class="bi bi-3-square m-1" draggable="true" ondragstart="drag(event)"></i> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-5 bg-light rounded p-3"> | ||
| <h3>Drop here</h3><hr style="height: 3px; background: black;"> | ||
| <!-- Drop area / target area --> | ||
| <div id="targetarea" class="p-4 bg-info rounded" ondrop="drop(event)" ondragover="allowDrop(event)"> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| <button class="btn btn-primary mb-3" onclick="reset()">Reset</button> | ||
| <p>Use reset button to clear drop area.</p> | ||
| <p class="bg-secondary rounded">Created using bootstrap and its icons, assuming I can do so for this assignment. <i class="bi bi-pen"></i> : Ashwin</p> | ||
| </div> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" | ||
| crossorigin="anonymous"></script> | ||
| <script> | ||
| //overwrite inbuilt function | ||
| function allowDrop(ev) { | ||
| ev.preventDefault(); | ||
| } | ||
|
|
||
| //storing classname of icon in text when drag starts | ||
| function drag(ev) { | ||
| ev.dataTransfer.setData("text", ev.target.className); | ||
| } | ||
|
|
||
| //accessing classname of currently dropping icon | ||
| function drop(ev) { | ||
| ev.preventDefault(); | ||
| var data = ev.dataTransfer.getData("text"); | ||
| // Assuming no duplicate icons exist, then an alternative is to give id's to the draggable items and use getElementbyId // | ||
| ev.target.appendChild(document.getElementsByClassName(data)[0]); | ||
| alert("Moved successfully"); | ||
| } | ||
|
|
||
| //reseting the icons | ||
| function reset(){ | ||
| var targetarea = document.getElementById("targetarea"); | ||
| var home = document.getElementById("home"); | ||
| home.innerHTML+= targetarea.innerHTML; | ||
| targetarea.innerHTML = ""; | ||
| alert("Cleared drop area. All items in Home container"); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |