26th Javascript Project - Multiple Image Preview with Draggable Div tutorial with source code

D#974 Multiple Image Preview Draggable Div Tutorial Source Code:

26th Javascript Project
steps to create: Javascript Project
1. create dynamic section on button click
1.1 add event listener load to window
1.2. when clicked on add create dynamic section
1.3. get the container 'holder'
1.4. copy the content that need to be created dynamic

2. Create Closable section
2.1. create span tag with class close
2.2. add click listener to container
2.3. make sure clicking is on span with class '.close'
2.5. call the model #showModal
2.6. add click listener to confirm button with #confirm
2.8. make model display 'none'
2.10. remove with transition, add clss 'slowly'
2.12. add listener transitionend on section(parent) `
2.13. add listener to model close and make display none the model

3. Make the Div draggable
3.1. add class to section as draggable
3.2. get all draggable class
3.3. add dragstart and dragend listener to every draggable div
3.4. add listener after dynamic appended code
3.5. add class 'dragging' on dragstart
3.6. remove class 'draggin' on dragend
3.7. add dragover listener to container
3.8. get the element with dragging class
3.9. temperory append as last - top to bottom appending, does not work opposite way

4. Drag and Change Position:
4.1. get the mouse position only on container
4.2. pass the mouse position to function to get the element to place
4.3. use reduce function to get the element to insertBefore

5. insert Image and preview
5.1. add click listener to container after dynamic appended div
5.2. check if it is clicked on input type=file
5.3. if yes, then add change listener to input type=file
5.4. get the next sibling image with nextElementSibling
5.5. get the files on change
5.6. use file reader to display the image

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: