How To Create Drag & Drop Using HTML CSS And JavaScript | Drag And Drop In JavaScript

hi guys welcome back to another video of easy tutorials today in this video we are going to learn how to create drag and drop using HTML CSS and JavaScript on my computer screen you can see here in the left box I have four blocks and we can drag it in the another box like this we can also drag this to the left box like this we have created this drag and drop feature using JavaScript and we have designed this webpage with the HTML and CSS so let's start to create this drag and drop step by step here in this folder I have created one HTML file one CSS file and we have one icon let's open these files with the code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added the title drag and drop using JavaScript and my channel name which is easy tutorials after that we have added link real Styles it href style dot CSS so it will connect this HTML file with the CSS file next we will add the code within this body tag so here let's create one div with the class name container and now we will add the CSS for this container so add this class name here in this CSS file and here we will add some CSS properties in this container I have added the width and height then we have changed the background and then we have added display Flex align item Center and justify content Center so that all the contents inside this container will be in the center after adding this let's come back to the folder and open this HTML file with any web browser so you can see the plain dark color on the complete web page we can close this browser and I will open it with the visual studio code extension called live server so it will refresh the webpage automatically whenever we will add any changes and save the code file so you can see the same webpage again now just come back and within this container we will add two div so let's create the first div with the ID left and duplicate it here we will add write so we have two div left and right next we will add the CSS for this so just copy this one add it here here we will add hashtag because it is an ID and again this second ID which is right for both tip we will add the same CSS properties with it will be 300 pixel then Min height 400 pixel margin will be 20 pixel and we will add the Border 2 pixel dashed and one color which is white after adding this let's come back to the webpage again you can see we have two box with the dashed border next we will add some blocks in the left box and then we will add the JavaScript that will allow us to drag that block in the second box so just come back and in the first one which is the left in this one we will add one div with the class name list and with this list we will add one more thing draggable true and here in this box we have to add one small icon and text so let's add one IMG for the icon here we will add the file name of the image which is icon dot PNG it is in my folder and after this image we will add one text so the text is list item 1. we have added this first div let's come back here you can see this icon and the text is in the black color that's why it is not visible so we will change the color let's come back copy this list add it here let's add the CSS properties for this list now you can see this block in the red color and we have the text list item one and we have the icon next we will add the CSS for this icon we have to reduce the size and add some space let's come back here we have the class name list and in this one we have the image with the IMG tag so we will decrease the width then we will add the space in the right side margin right 15 pixel and space in the left side so margin left 20 pixel so this list block looks good next we will duplicate it and create four list blocks so let's come back and duplicate this and here we will change the text it will be list item 2 3 4 so here you can see we have total four list items so we have added all the HTML and CSS next we have to add the JavaScript that will allow us to drag this item in the right box and we can also drag the item from the right box to the left box so let's come back and in this HTML file just above this closing body tag We'll add a script open and closing tag and visit this script we will add all our JavaScript so here let's create some variables first we will add let lists equal to document dot get Elements by class name here we have the four elements with the class name list so we have stored all this in this array which is lists next we will add let write box equal to document dot get element by ID and here we have this ID right now duplicate this and it will be left box here also left so we have three variables next we have to add one function that will drag this item to the left side or right side we have to apply that function in all four list that's why we will add one for Loop here we will add for list of lists this lists is here at this point and in this one we will add in the list item we have added drag start event and when we will start dragging we will get that element e dot Target and we will save that element in the selected variable let select it so we will get which element is selected when we are dragging the element next we have to allow it to drag over the second element which is the right box so here we will add so when we are dragging the element over the right box here we are just adding e dot prevent default so it will prevent the default feature after that we will add the drop event because we have to drop it on the right box so when we are adding the drop event on the right box then in the right box we have to add the selected element so here we are adding write box dot app and child selected it means it will add this selected element inside this right box because we are adding app and child after that we have to clear that selection so here we are adding selected is go to null so that we can drag the other element and that will be stored in this selected variable now just come back and let's see if we drag this item and drop it here it is working fine but if we drag it from the right box to the left box it is not working because we have not added the drag over and drop event on the left box so we have to just duplicate this two events this one and this one so let's duplicate this drag over and drop event and after duplicating we will change the name it will be left box and here also left box that's it and here we will add left box dot open child selected that's it after adding this thing let's come back to the website again and here let's drag this in the right box and now we can drag it to the left side also like this so finally we have completed this drag and drop feature with the help of HTML CSS and JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 78,551

Keywords: Drag and Drop using JavaScript, Drag & Drop in JavaScript, Drag Drop event In javaScript, Drag Drop on Website, Drag HTML Element, Drag and Drop on HTML Website, Drag Element JavaScript, Web development, JavaScript projects, JavaScript Small projects, JavaScript for beginners, HTML and CSS, JavaScript, JavaScript Events

Id: 4AHot187Lj0

Length: 11min 51sec (711 seconds)

Published: Sat May 27 2023