Easy Drag n Drop with JavaScript - how to code tutorial

what is upper body my name is Tyler Potts and welcome back to another video in this video we're gonna be creating this simple drag-and-drop kind of like Trello style we're not focusing on doing any sort of dynamic data yet but we aren't going to be doing in the future a Trello clone which I hope everyone will enjoy but for now we're just going to be creating this simple drag-and-drop or your menu think where a lot of us to just drag and drop it this is just to get you used to using the drag-and-drop API the JavaScript it's it's very simple it's very fun to you so you can create loads of different cool things with the drag-and-drop API this is just one of them but without further ado let's continue on and start the video so we first things we need to do is obviously stop and we need to open up my terminal well we don't have to watch prefer to use terminal I'm gonna go into my projects folder and I'm going to make a new diet you know let's go into the hundred days of code because it's day so we need to make a new one is day 77 and it's gonna be called drag and drop nice less CD in today 77 and let's now just basically create our class new or make a directory called drag and drop cool CD in to drag and drop and now I'm in now I'm gonna open this up so I'm going to use code dots and you can open this whatever text sets you want I prefer to use PS code I'm gonna put this as a separate window I'm gonna create a new file called index.html and I'm gonna use M it to edit tab set exclamation mark tab to create it's boilerplate dis sorry he'll just design a structure HTML structure and we'll call this drag and drop hit save and I'm assuming a little bit or maybe too much maybe that'll do just you can see the text a little bit better let's minimize that now we need to create two more files we will create a main CSS and a main dot JavaScript so they are all default we need so I can just hide that oh I am way for that and in our markup so with the drag-and-drop markup we could create a dynamic markup which where we can add nude lists so you saw we had like five lists there we could create new lists and then we could use dynamic content to create separate list items which we will do in a cello clone but for now we're going to hard-code this this off these items and create a header because I like having a head just because most apps have a header or something similar drag and drop and that should be fine I'm not really gonna style it up too much I won't create a DIF with called lists so this could contain all of our lists so I'm gonna have a list times for Asus and Emmet finger you can say you want free lists and then inside these lists I want to have a list item there we go so you got free list with a list item and we're just gonna say list item list item list item nice so that is looking pretty good now when you create so basically what's happening we have this list so this is just the list of Lists we then want to create a list item for example so we should be able to create like 4 or 5 list items in there so this is what happen in a Trello app but so we ask the list time but the list items talked is to drag a blue item here so we'll be dragging this item here around so these items to make those draggable we have to add an app be called draggable and this is equal to true so we have a lists with a list if we're free separate lists with a free separate list i well one separate list i'm in each list i am and that is basically how our markets gonna go and that's what we really need for now we're gonna move each list item into one actually because then we can shirt demonstrate from one moving into the office you can put them wherever but for now and I'm going to give these numbers so we're gonna say 1 2 & 3 there we go so we've got those with numbers so now if we go to our markup oh we need to start a surfer and starts therefore we need to run you can use NPM too until she go npm install' globally live surfer and now I'm still what I'm about to use you need to know how to choose NPM this isn't an NPM tutorial so I'm not gonna go through there you can just double click your HTML file to open this if you really want I'm just gonna live surfer dot and that's gonna open up our new drag and drop so this way looks like doesn't look great but we will style it up now so the first thing we're going to do is add some reset so I'm gonna say B I'm gonna make sure everything has no module that's not margin no margin no padding and we're gonna set the box sizing box box shadow I want imagine every having a box shadow I look crazy box exciting to board a box I think I set the body background and we said this to FF c/e serious theory and then we're gonna say from family off rebozo Helvetica and sans-serif we don't need the rowboat so fun I just might frighten just because I have it installed on my machine and we'd use the Apple we displace flex because we want it to basically take up space we're set the width to 100 feet W and the height to a hundred vertical height I think is a flex flow column and then gonna say header and in the header we say display flex justified content Center aligned items Center and the height of it is gonna be 60 pixels hit save and that should be fine we don't ring me a background on that it should just be fine so we need a lists and why displayed lists that's a flex item because we wanted to basically show in like a row do we need a flex flow on that no we have to flex five column up here let's move that so it looks right there you go okay so flex one we need a width off a hundred percent you want to take up its all if it can or well I guess if it's in a flex in and it's gonna be it's going to take up all the room it can anyway right just in case and then we're gonna add an overflow X of scrub just in case we have Morphin let's say four or five lists we don't want it to like break the page we just want it to be able to scroll left or right and that's what there's gonna do for us we're gonna add a lists dot list so this could be each individual list we're gonna also have these as flex this whole thing is built on the flex box model just because it's super simple to use and we can get a system all set up in a second so we're gonna flex one with 100% min width off 250 pixels a max width of 350 pixels so we're covering the whole scenarios high off a hundred percent and a min height of 150 pixels we don't want to add a background color off rgba 0 0 0 point one I'm gonna do one I did do it SSO point one or two in my demo but I want to try so connect and we'll give it 50 pixel surf margin on the left and right so it has some spacing a padding of 8 pixels and a transition off or would say all zero point two seconds linear just cuz we're gonna add in some buffer effects and stuff basically we're gonna say lists dot list dot list item so we're gonna target our list item we give a background color and we'll set this to a light ray we're gonna add a border radius of 8 pixels some padding of 15 pixels 24 la o 20 pixels on the left and right 15 on top and bottom and we're gonna have text-align:center so all this stuff I'm doing here is just set work for before we get on to the actual work for to think so if we refresh oh we can't refresh this we need to actually link this in so we say link and what's a main dot CSS and down here we'll say script source and we'll say remained on J is less it's safe and there we go so now these are draggable items because we added to drag the attribute if we set this to false so we'll say I am - to false refresher you see we could drag on one but I am - Justin it's not draggable and now it's because of this reason we need to add drag belong to it so it allows it to be a track well Edmond only enables DFM listeners for the draggable well enables you to use them so we've got this drag and drop this looks alright we could probably made a little bear but for now this is fine now we want to go straight into our main GS now so in here we need to get fianc we need to get all the list items and we need to get order lists normally in a Trello app we would have dynamic data so we would have all the list items and would would dynamically create more when add them to an array but for now because we're creating it's all static we're gonna basically grabbed a static items you see okay javascript I always say list items say this is a document dot query selector oh because we want to get multiple items and we say list I am cisco yes all our list items we don't want all lists and set this to document query selector or query selector all and dot list because we want to get all the lists now we're gonna set available here in this variable basically it's gonna be the item we are currently drag it we're gonna say true dragged or dragged item is equal to null because there's nine which is being dragged currently I think it's a four and we're going to create a loop so we loop through all the list items and then loop through all the lists so we're set is equal to i it's less than or list do we do which way do we do it do we do this first or list items probably list yeah no we need to do items first so we just want to do list items dot length the reason we want to do items first is because we're gonna be nesting in the what's it called their lists because we want to basically be able to have the list items available to the lists and not the other way around so now we're going to look for that we now want to say let item or const item because it doesn't need to be changed const item is equal to list items i so it's gonna get the current item in the list or in the array and now we want to add a couple of event listeners but we're not gonna do that so we're gonna create a loop for the lists so we say lists dot on there we say for let is equal to zero I is less fan lists dot length I plus plus and now we're gonna say Const list is equal to list I not oh I also we want to kind of change this I to be AJ or saying because we don't want it to be the same as that pigs I was gonna overwrite each other if we need to use it further down the line although we shouldn't I mean we could all right so now we've got these now this is this is basic JavaScript disks or stuff we're not going Oh first and this is just the stuff we can do easily this is stuff I expect you to already know before coming into a drag-and-drop tutorial does that make sense so we can still drag these around but there's no offender so if we open up the terminal on the right here you'll see when we drag and drop nothing's happening we need to set some event listeners the first one is for the item so we need to have an event listener for each item we want to say add event listener and we're gonna listen for drag stuff now there's gonna be a function but we're gonna pass through an event or not we don't really need it for this one but you could do now we want to say the dragged item is equal to this item wicker or we say this because we want to sell it equal to the current item we're tracking which is equal to this item which we drag star I'm also gonna console.log this so you can see when it gets caught so there's a console dot log drag star and we're gonna pass through the offender which we're gonna have here so if we refresh now if I start tracking this item you'll see we get a drag start variable with this drag FN and it's not much really here you can have two estate a transfer which has four drop effect effect allowed files you could have pretty sure you can drag files items so I'm Celeste types as etc so this stuff will go into more advanced in the Trello clone one but for now there's just an introduction to drag and drop as I said so we know when that happens but now we also we need to listen for when the drag ends because once the drag ends we're going to need to do some other things so let's save function and let's say well which one a console dot log drag end for now and I'm gonna remove the offend from this because we don't need it again not yet hit save and refresh so now we're gonna drag it and we let go which is gonna end the drag so we're not no longer dragging and it's gonna say drag start drop try again track star try Kent now what we need to do in here is we need to say dragged om is equal to no because we're no longer dragging the item but we all want to do this to our leakers if we sell it to know when we drop it it's gonna ruin the drop offence we're gonna create a drop in but we need to create a drop event on the list cuz it needs to listen for where we're dropping it so if we drop it here we don't want to say oh yeah I penned it to one of the listen here pens it to let's say deferred one or it just and append it to the foil really pens it back to the first one that makes sense of pride doesn't but your understand one should get fur for a long so we've got the dragged I am set to know we want to quickly say time out we want to say set time out and we say function and we're gonna set the functions timer to cero the reason for it being serious because we want it we don't care about it actually blame we just want to make sure it calls this after zero seconds so it has literally a serial millisecond delay and we want to set to none because the reason for this is because when we drag if you notice when we drag an item the item is still currently here and we want to hide it and to do that we need to say this dot style dot display it's equal to none so we're setting it equal to none so we're not going to display it before this we want to say dragged item it's equal so when we drag end we want to say wait so let's let me explain because this isn't going to make sense you see here we have to set timeout but we're not good to talk about it let's just say crit so if we set this styled to display to none in drag star and we will fresh and then we go to drag an item you'll see it's disappeared we're still dragging it but we've set the item to be invisible before we start ragging which means it's it's invisible well it's just here so but to stop this we need to set a timeout so we're going to say set timeout is equal to a function which is only two zero seconds which has this display:none in now if we refresh and we drag you'll see it has not disappeared like it should have and that is because I fight this don't stop if we said I am da star maybe is the part where we would say I am there we go so it's because we add this we're going to set our um because this isn't working so you see we can drag it and we can let go now it's still in Fist ball it's still here you just can't six it's invisible now we need to do the same here so we can set a timeout and after the timeout is hit zero just so there's a slight delay we need to say dragged item dot style feel let me does style display is equal to a block and then we're going to set to null we don't set to know straight away now if we were fresh and we drag this I'm a dismiss and once we let go it goes back into here because obviously we had set up to change position yet so that is what the timeout is for just so you know and to be fair you probably don't need a timeout actually and here you just need to time up for the drag - I am null because if you don't and you drop it before the way if you point when you drop it you're gonna counteract a drop value that tracked item equal to now before we actually drop the item which means when we use this drag when we try to append this dragged item to the list it's going to be like no it it's not why is that that's why it's in this timeout function so in the list now we need to add an event listener to the list and we were saying add event listener and we're gonna say drop will this a function with an e or an offend in here and we're gonna stay here this dot append dragged item now this isn't gonna work just yet because we need to do some more things if we refresh and we drag and we let go no it's gonna happen to drag if we console.log in here console dot log drop you'll see when we drag and we drop no functions being called that's because this doesn't work with the drag effortlessness we need to prevent the default on a couple for a feminist so before this one let's add a list dot add event listener drag over this is called every single frame the item is being dragged over the list item and then here we say e dot prevent default or every single time we move the I am a for it not at s we drag over the item so this is gonna prevent default which can allow drop to work but we also have to have one more it's called list add event listener drag enter so when we first enter this list item with the drag boy and this is going to be caught but we need to prefer we need to prevent default so it's not going to cancel out the drop so now if we refresh and we drag and we drop you can see it's already moved so that is pretty much where we want to get to here so if we drag this item we can drag and drop it and same with this one we can move them around to any block what we want to and it kind of works pretty well now when we drag once if we want to add some changes when we drag this over for something well we can do that so we've got some we've got some offense now right we've got this drag over drag enter and drop now we can change that we could even add classes to these items and then remove the classes so when we drag enter we could add a class or when we leave we can remove the class but we can also just do it through JavaScript which we're going to do normally you would probably set for classes it's bear but we can just do this without a class so in drag enter we're going to say this dot style dot background color is equal to rgba 0 0 0 0 point 2 so now if we were fresh and we track this over you'll see it gets slightly darker that one gets darker but the problem is here they don't go back so we need to set up something else here we need to get this and when we drop the item we want to say this back to 1 we also want to go back to we need to create enough for a fence when you say this dot a defend listener dragged leaves this called every single time we leave the list I am with the dragged I am and we want to set the exact same value here the reason we want to set this here so if we disable this quickly just so you can see what happens now if I have wrote this but I don't drop it in there you can see it still got the style appended to it during time it disappears if I actually drop it in there the reason for that is because this only happiest style is only reset once we drop it but if you see here if we now leave so we refresh and we have row 4 and then we have 4 out you can see it changes so there you go you got some sort of hovering effect so we can drag and drop each item which kind of cool so it's got some dragging and dropping effects now you can do a lot more of this this is fairly basic so we've went out for a few fingers we went over what drag enter drag leave drop Perce drag over dragon drag star so they're all offense but there is a few more this I'm not good line I don't know what they are off by heart we can actually go over to the drag and drop was they hedged milk's I think I'll come up it's the this one the web and api's stuff and if you go down you can see here there's drag exit - I think that's actually the only one we're missing drop drag so that's this dragon which we're not using and actually there's loads don't think you'll need to learn you son it yourself but at the same time the only ones you really need to know right now are these four here and the two up here so track star and drag end is fully oi'm you are dragging and then drag bow for drag enter drag leaf and drop are all for the item you are dropping or dragging your elements over so I hope that makes some sort of sense but yes so I hope this was super easy it's very straightforward for me I hope it's straightforward you obviously you need to know some sort of JavaScript it you're never gonna jump into sank like drag and dropping stuff from just learning HTML and CSS and then jumping strange Java if you want to learn if all the basics of JavaScript first so I probably said that starts a prerequisite to this would have been learning JavaScript basics now these are effective in types of fent list since we did loads of different event listeners so we could also append to this let's say if we click an item select the item and then we can press our arrow keys to move it left and right in two different lists again that's not something we're gonna do in this video deaths just saying we can do so I want to go over a lot of event listeners in the future and some really cool things so that's what I want to create a Trello cloned tutorial because I think that can teach you a lot from it so if you're interest in that and let me know in the comments below but for now guys I hope you enjoyed this video if you did then leave a thumbs up for me it really does help if you want to see more than hit up subscribe burn and if you want to get notified straightaway and beyond the video straight away learning so new with me then hit that Bell burn the videos go live from Monday to Friday 10:00 a.m. each morning BST British summer time you British UK so much time 10 a.m. UK from Monday to Friday sometimes I do mr. video so if you want to know be notified when I do miss a video if I'm not gonna be able to upload one head over to my Twitter at Tyler underscore Potts and scored link is in the description and you can get notified there or I do sometimes try to post on YouTube itself so again hit a subscribe bone in your see those posts I place for now guys thanks for watching if you have any feedback drop in the comments section below now without further ado peace out what's up guys so I'd give a special shout to my patreon for being awesome so Matt a shout out to SD guy tactician 's fensively programmer a knifing double-oh-seven and chris Burrell a special thank you to technicians for buying the yeti mic for this amazing audio quality and thank you to the rescue for being absolutely awesome thank you very much and I will see you all in the next video [Music]

Channel: Tyler Potts

Views: 69,073

Keywords: HTML, SASS, CSS, HTML5, CSS3, JavaScript, Tutorial, app, website, dragndrop, js, api, web app, pwa, vanilla

Id: tZ45HZAkbLc

Length: 27min 57sec (1677 seconds)

Published: Mon Jul 29 2019