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

Published: 22 June 2020
on channel: UI Monk

259

D#974 Multiple Image Preview Draggable Div Tutorial Source Code:
https://drive.google.com/file/d/1MSpR...

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.4. check with e.target
2.5. call the model #showModal
2.6. add click listener to confirm button with #confirm
2.7. make sure clicking on confirm with e.target
2.8. make model display 'none'
2.9. with e.target get the parent of close span and remove
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
3.10. remove the stop symbol by e.preventDefault();

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
4.4 • 21th Javascript Project - Create Dynamic a...

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
5.7 • Ep25 - Upload and preview image - JavaScri...

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:
agnelndrvishal@gmail.com

On this page of the site you can watch the video online 26th Javascript Project - Multiple Image Preview with Draggable Div tutorial with source code with a duration of hours minute second in good quality, which was uploaded by the user UI Monk 22 June 2020, share the link with friends and acquaintances, this video has already been watched 259 times on youtube and it was liked by 3 viewers. Enjoy your viewing!

13,912

323