21th Javascript Project - Create Dynamic and draggable section Tutorial with Source Code
#D957 Dynamic and Draggable Section Source Code:
https://drive.google.com/file/d/1CiZK...
Steps to Create
1. Append the section
1. Explain HTML
2. run all code on window loading
3. add click listener on button
3. dynamic create div with class and attribute
4. append the dynamic created div to container with simple text
5. now append the html
2. Create Closable Section
1. create the button
2. run foreach loop for every closable button
3. add click listener to closable button
4. remove the parent when the button is clicked
3. Make the Dynamic Created Section Draggable
1. get the draggable elements with class 'draggable'
2. run forEach on all draggable elements
3. add listener dragstart on all draggable elements
4. add listener dragend on all draggable elements
5. add 'dragging' class on dragstart and dragend
6. addlistener dragover on container
7. temporarily append the dragging element with class 'dragging' to container
8. allow dropping by using preventDefault()
9. get the mouse position only on the container using e.clientY
10. pass the mouse position to get the element to insert before
11. get all elements except the current dragging element
12. convert the nodelist to array using spread operator
13. run foreach on all draggable element
14. get the dimension info of the draggable box using getBoundingClientRect()
15. remove the forEach and add reduce function
16. perform condition if -ve values then return the element
17. get the returned element
This is the completed UI Design Javascript Tutorial. I created along with my 3years experience in Javascript UI Development. I have left the source code for every javascript ui tutorial for free.
contact me anytime for the source code:
[email protected]
