diff --git a/14_drag_n_drop_01/app.js b/14_drag_n_drop_01/app.js new file mode 100644 index 0000000..2c4469d --- /dev/null +++ b/14_drag_n_drop_01/app.js @@ -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. diff --git a/14_drag_n_drop_01/drag_drop_icon.png b/14_drag_n_drop_01/drag_drop_icon.png new file mode 100644 index 0000000..2b0c589 Binary files /dev/null and b/14_drag_n_drop_01/drag_drop_icon.png differ diff --git a/14_drag_n_drop_01/index.html b/14_drag_n_drop_01/index.html new file mode 100644 index 0000000..beb768e --- /dev/null +++ b/14_drag_n_drop_01/index.html @@ -0,0 +1,28 @@ + + + + + + + + Drag n Drop 01 Using Javascript + + + +

Drag n Drop (JavaScript)

+

Drag n Drop List item from one box to another

+
+
+
List Item 1
+ +
List Item 2
+ +
List Item 3
+ +
List Item 4
+
+ +
+ + + \ No newline at end of file diff --git a/14_drag_n_drop_01/styles.css b/14_drag_n_drop_01/styles.css new file mode 100644 index 0000000..2c6ac55 --- /dev/null +++ b/14_drag_n_drop_01/styles.css @@ -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; +}