 What's up team welcome back is your biggest fan the real Casadero and in this lecture we're talking about the html 5 global attribute of Draggable, which is also used with the html 5 global attribute of Drop zone they aren't used together in the same attribute. I guess they could be anyway team Here's the point is that both these attributes they're separate They're used separate but you can use them together in conjunction with every other attribute and every other thing that you're gonna find inside of HTML 5 to build just about anything you can imagine right the number one skill We need to have when it comes to all of this is not necessarily understanding any of the stuff that I'm talking about But it's being able to have an idea in your imagination or receive some sort of instructions from someone and be able to think your way Through these instructions because there's different problems that need to be solved along the way and that's what you do team You are the problem solver. You're also the creator the coder the artist the entrepreneur Whatever team so you got to learn to think about this stuff for yourself. I'm just here to show you the way So let's jump into a team and look at the html 5 global attribute of Draggable alright team. So we're here on the desktop and the first thing we're gonna do is create a new project So we'll just right-click and we will go where is it at new folder and we're gonna call this html 5 Draggable DRA gga vle Draggable attribute a Enter and now we'll double-click to go inside of this folder We'll right-click and say open with code is gonna open visual studio code and I've got multiple windows here Let's close this one with the alt f4 and we don't want to save that We're gonna go back over here to our main window do a control w control s It's not do always because we closed the other window So here we'll go new we'll right-click inside of our Explorer bar will go new file and We'll name this index dot Html so now we have a html file and we just got to put an exclamation point and hit tap and we have a basic document We'll call this html 5 Draggable DRA gga draggable Attribute a ttribute and then we'll shift will control shift Right at left arrow to select all of these control C And we'll just go and look notice how we're scrolling around. Let's hit um, I think it's alt Z To turn on rapping and then we'll hit control B to get rid of this sidebar And now we'll add a h1 and we'll just paste this in now what we're gonna do team is we're gonna hold the alt key and hit enter and That it's not that didn't do it. I wanted to do so we're on this line It should be alt enter or the control control enter my bad team To go down to the next line and make another line and now we're gonna make two paragraphs And we're gonna fill them up with some text because we're gonna use these paragraphs to demonstrate What draggable is team and let me adjust this volume. It looks like it's up too high. All right So what we do now is we just go down here and we're gonna say p times two and A child item of that piece. So this is gonna be less than is gonna be our alarm text And we're gonna make it ten words and then we'll hit tab and we get two paragraphs So if we save and do alt f4, we don't need this right here and Right-click inside of our folder again and go open with code like we've done so many times before already It's gonna give us the ability to use We don't need this don't save all right, it's gonna give us the ability to use our live server So we'll Open up our live server over here So we'll put one off to the left and we'll put our code off to the right And when we go in here neither one of these are draggable things So what we can do is we can add the attribute of draggable draggable And we can set this to true save and then we can drag this thing around now another thing We can do like say for instance. This one doesn't have an attribute. We'll give it one though. We'll call this draggable And we're gonna set this one to false f a l s e save and Nothing changes. We still can't drag it Because false is the default now some items are automatically draggable like links in images So if we add a tag and we I don't know it doesn't matter We can just put this in here and you can say I am a link and I am draggable by default and then Here we'll put I am a link and I am not draggable because Well, actually we'll say Not draggable and they will say draggable draggable Attribute is set to false f a l s e enter Yeah, so we'll control s to save and so links are in line elements So we just need to put a br to put a page break between them and put them on different lines And we'll add another one to give some more space Save all right So now we got some space between our links and we can drag our links around just like we can our text that we set to be true But down here We can set this to false. Of course. We already know that right so draggable and we can say false save and Then we won't be able to drag This link around we can still drag this one because that's what the default is But we can't drag this one around because we set this draggable to false team now The default attribute is auto So if it's set to auto then every if it's a draggable element, then it'll drag and if it's not a draggable draggable element Then it won't team unless we explicitly fast special unless we explicit explicitly specify That we want to use true or false now images by default So I've read or draggable, but when I tested it I I couldn't make them not drag So like if we go out like I think I have an image I don't know if I have an image if we go out to the internet and just grab an image. So we'll go internet This type internet will go on Chrome see it actually let's go edge So we'll hit windows edge and this will open Bing and Bing has the best image search I think so we can go let's look at my computer case NZ XT 700 So we got these computer cases we go to images boom we got all these cases We have a white one so we'll click this one And these are actually not what I was looking for but hey look you can get one on eBay for 138 bucks. Let's go back What's going on? Okay? All right, let's close this and go back over here We just want the images right so this is going to be the organic images down here at the bottom And this is just a nifty trick in case you ever need to find an image and what we're going to do is going to say PNG and We'll say white the VHIT so we're looking for just the white cases So we're going to do is we're going to click on We'll click on this one right here click it again, and now we got this full image. We'll just right click we'll go save as and It's going to ask us where we want to save it and we're going to go to our desktop and we have this folder We that we just made we just have to find out exactly where it is So we're going to make this bigger and we're going to sort by date modified And now we have our draggable attribute there and save this inside of that folder close this out and now we can go here and We can set our image so we can go IMG Well, actually let's put our image outside of this link So we'll go IMG and then what our source will be this image right here, and we'll say alt and we'll go the NZX NZXT 700 computer case save Now we got our computer case there And what we can do is add another attribute to control the height and width of this thing. So we're going to say height And then and also height and width or global attributes as well So we can set our height we'll set this to 100 pixels save and now it shrinks down to a more reasonable size And we don't even have to specify we can specify the width if we want so we can go WIDTH Is equal to whatever you want it to be actually need a Gotta put a quotation mark there. We got to get rid of this quotation mark Let's do a alt Z. So all this stuff wraps up if we aren't scrolling all over the place And that to do what I just did you just hit the alt and the Z key team All right, and we'll set our width to like 200 pixels So now we get an image desk, you know stretched out You know I'm saying so we can control we can control stuff like that team Now also images are in line elements. So what we want to do is we'll add a BR underneath our link So we'll do BR tab safe So now our computer goes under these and we'll just add another one by holding alt shift and hitting the down key Save. All right. So now we've got our computer image and by default These images are draggable now. We should be able to turn this off. I haven't tried this before I don't know if it's gonna work, but if we go in here and we go to drag a bowl And we set this to false in theory We shouldn't be able to drag this image around and we can't team. All right, so it worked So that is how you can set things to be draggable and not draggable team. That is it for this Lesson this lecture whatever it is you want to call the team but That is that in the next in the next in the next lecture We're gonna talk about drop zone and then we'll and then we'll actually go into how we can drag and drop stuff And that's gonna team. I'm telling you it's gonna take you further down the rabbit hole because we're gonna be looking more at JavaScript in order to implement this stuff team like we have we have the tags We have the elements of HTML We have the attributes to do a bunch of cool stuff But there's times where we just need to use JavaScript to specify things and that's just the way it is right It's you know these things could in the future Any of these things that we are doing in JavaScript could very easily become tags in HTML That just do the stuff for us, right? So if we can make that happen by going off and you know joining the community and helping to write the standard what or whatever So whenever we have to use JavaScript is just because somebody else hasn't come up with one solid single Tag or element or attribute or command that will execute all of those different things required to produce the action Or the result that we want and that's what we do as programmers We are looking at a problem and we're using code to close the gap So when we want to start a business we look at all the different things out in the world all the different Possibilities there are to maybe going out and starting a business and then we go Hey, how can we condense this down into something that a computer can help us do right? So maybe we don't need to storefront all we need is a website We need to sell stuff or we want to sell stuff or want to sell a product or service So how do we give people the ability to to book us to book an appointment without having to pick up the phone? We want to make everything as easy as possible, right? You just go on that you just go on the internet you want to make an appointment you click a couple buttons You've got an appointment you want to order something you click a couple buttons in its honest way to your house That's what we as developers do our mission is to make the world Easier to use for everybody team and to make money while we're doing it I will see you guys in the next lecture