-
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.
created a drag and drop element from one div to another
- Loading branch information
1 parent
ffa6881
commit 5a92645
Showing
4 changed files
with
109 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,25 @@ | ||
let lists = document.getElementsByClassName("list"); //This line selects all elements with the class name "list" and stores them in the variable lists. | ||
let rightBox = document.getElementById("right"); //This line selects the element with the id "right" and stores it in the variable rightBox. | ||
let leftBox = document.getElementById("left"); //This line selects the element with the id "left" and stores it in the variable leftBox. | ||
|
||
for(list of lists) { //This line starts a loop iterating over each element in the lists variable. | ||
list.addEventListener("dragstart", function(e){ //This line adds an event listener to each list item for the "dragstart" event. When a drag operation starts on a list item, the function specified in the second argument will be executed. | ||
let selected = e.target; //This line retrieves the element that is being dragged and stores it in the selected variable. | ||
|
||
rightBox.addEventListener("dragover", function(e){ //This line adds an event listener to the rightBox element for the "dragover" event. This event is triggered when a dragged item is being dragged over the rightBox element. | ||
e.preventDefault(); //This line prevents the default action from occurring during the "dragover" event. This is necessary to allow a drop operation. | ||
}); | ||
rightBox.addEventListener("drop", function(e){ //This line adds an event listener to the rightBox element for the "drop" event. This event is triggered when a dragged item is dropped onto the rightBox element. | ||
rightBox.appendChild(selected); //This line appends the dragged element (selected) to the rightBox element. | ||
selected = null; //This line clears the selected variable after the drop operation. | ||
}); | ||
|
||
leftBox.addEventListener("dragover", function(e){ //Similar to lines 7-8, this line adds an event listener to the leftBox element for the "dragover" event. | ||
e.preventDefault(); | ||
}); | ||
leftBox.addEventListener("drop", function(e){ //Similar to lines 9-10, this line adds an event listener to the leftBox element for the "drop" event. | ||
leftBox.appendChild(selected); //Similar to line 10, this line appends the dragged element (selected) to the leftBox element. | ||
selected = null; //Similar to line 11, this line clears the selected variable after the drop operation. | ||
}); | ||
}) //This line closes the event listener function for the "dragstart" event. | ||
}; //This line closes the loop that iterates over each list item. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,28 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta name="keywords" content="javascript tutorials, codingninjank, nitish khobragade programming, nitish khobragade, 8982324497"> | ||
<meta name="author" content="Nitish Khobragade"> | ||
<title>Drag n Drop 01 Using Javascript</title> | ||
<link rel="stylesheet" href="./styles.css"> | ||
</head> | ||
<body> | ||
<h2 class="heading">Drag n Drop (JavaScript)</h2> | ||
<h3 class="heading2">Drag n Drop List item from one box to another</h3> | ||
<div class="container"> | ||
<div id="left"> | ||
<div class="list" draggable="true"><img src="./drag_drop_icon.png">List Item 1</div> | ||
|
||
<div class="list" draggable="true"><img src="./drag_drop_icon.png">List Item 2</div> | ||
|
||
<div class="list" draggable="true"><img src="./drag_drop_icon.png">List Item 3</div> | ||
|
||
<div class="list" draggable="true"><img src="./drag_drop_icon.png">List Item 4</div> | ||
</div> | ||
<div id="right"></div> | ||
</div> | ||
<script src="./app.js"></script> | ||
</body> | ||
</html> |
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,56 @@ | ||
*{ | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
font-family: 'Poppins', sans-serif; | ||
} | ||
|
||
.heading { | ||
height: 5vh; | ||
text-align: center; | ||
color: #ffeded; | ||
text-shadow: 2px 2px 5px black; | ||
background-size: 100% 100%; | ||
background-position: 0px 0px; | ||
background-image: linear-gradient(90deg, #A100FFFF 0%, #71C4FFFF 100%); | ||
} | ||
|
||
.heading2 { | ||
height: 5vh; | ||
text-align: center; | ||
color: #ffeded; | ||
text-shadow: 2px 2px 5px rgb(241, 134, 134); | ||
background: #0b0423; | ||
} | ||
|
||
.container { | ||
width: 100%; | ||
min-height: 90vh; | ||
background: #0b0423; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
|
||
#left, #right { | ||
width: 300px; | ||
min-height: 400px; | ||
margin: 20px; | ||
border: 2px dashed #fff; | ||
} | ||
|
||
.list { | ||
background: #e91e63; | ||
height: 60px; | ||
margin: 30px; | ||
color: #fff; | ||
display: flex; | ||
align-items: center; | ||
cursor: grab; | ||
} | ||
|
||
.list img { | ||
width: 10px; | ||
margin-right: 15px; | ||
margin-left: 20px; | ||
} |