How To Add Drag And Drop To Blazor

welcome to just a blazer programming and the last couple of you know couple of days maybe five days or so it's been kind of crazy right but uh i'm not here to discuss that today i'm gonna go into the topic um anyways drag and drop in my last video that i made about the q and a that daniel roth programming manager of blazer said that there is no drag and drop in blazer that's native to it so in order for you to do it you have to do it yourself basically or you're gonna have to find a library do it for you and today this video is gonna teach you how to implement a drag and drop interface or just some basic drag and drop for your blazer project and it's actually really really simple like he said so you know i got to give him credit for that i was kind of skeptical but i'm going to show you a really a bad way of doing it and i'll show you a slightly better way of doing it that's a little bit more flexible so let's get on to the project hey guys welcome to the project don't worry if you see some stuff here that you do not have on your end this is not the starter product this is one of my older projects for my reusable component and if you're interested in creating your own reusable components i'll have a link up here that you can go check that out after this video hopefully and now we're going to get started with our drag and drop tutorial don't worry it's actually fairly simple so the first thing we're going to do is what we usually do with um with these tutorials gonna make a new page so let's do that i'll be the new nav link first and i'm gonna call this i tag to call the href the same thing drag and drop and i'm planning to show you two different ways of doing the drag and drop um one of the ways i'm not going to code it completely i'm just going to show you like a brief example because i don't think it's worth it and then i'm actually going to show you a decent drag and drop method you can add onto your blazer project it does involve js interop because you will be using a js library but there's a reason why js interops exists and is for cases like this is there also a reason why microsoft didn't bother doing it because it's actually not that difficult so or is it that pertinent we added a new uh page here drag and drop was not pages yet we're gonna create one add page drag go make sure that href is the same thing perfect always paranoid about those things that should be fine i'll leave that there for now in this case in order to use we're going to use a different method of the js interop and if you don't know what a js interrupt is you could check out my tutorial for the json up there that was my least view tutorial but i it's a really important one that one should know so the first thing that i'm going to show you guys is an html way of doing a drag and drop which takes the least amount of work so i'm gonna paste my thing here so you see that i have a div class of html5 all this is just uh i did with html5 for the text inside of it i have a class here for a reason because we're going to do something special today we're actually going to implement something called css isolation now i didn't want to make a whole video about it because i made a code behind video to explain what's happening but we're gonna add css specific to this uh page this component however you wanna call it and we're gonna have a class called html5 so in order to do that i want you to right click on the component on on the page here and then we're gonna i'm not not here my bad on pages we're gonna add a new item and i don't think i see it here so we're gonna have to add it here so i want you to give it the same thing you gave it to the uh to the component here drag and drop dot razor dot css so you put dot cs s in the end and this will scaffold the css to the drag and drop and now you have something called i guess css isolation this is brought up also in the q a that bazer now has this way of adding css to it so instead of having a global file that you have to read off here in the wwe root you would now have access to a css specific to this one so oh no i don't want you made a razor i mean i gotta delete this it didn't work as i wanted to so i'm just gonna re-add that again there's a css file down here i could pick here it is yeah just pick that drag drop dot razor dot css there it is so if you're having issues like i was having there go directly to the css object within the uh when you start adding the item to it and then add dot raiser so the name of the the component dot razer dot css as you saw there it didn't work by me doing it manually you have to kind of find the right file but anyways no harm no file what i want you to do is copy something that i'm going to give you right here now you could do this if you want to it doesn't hurt if you don't uh what it does it just makes this a lot more visible so i'm just going to put in some css i already pre-made so don't worry about this for now i'll show you where i got all this from so in case you want to do a copy paste of your own you either copy me directly here or you can wait a moment so i'll show you exactly where i got this html5 so now this is an html5 with a draggable html5 event i believe add attribute so you are able to use a drag you can able to drag this particular element on the screen now i don't like this and then the work it takes for you to actually make this work uh look more professional i think it's just not worth it but i'll show you a full example of it so this is what it looks like i turned it green i made a box and you could do something like this right you go to another example that says something like this you're not going to be able to do it here going to whatever i have here but yeah so this is what a draggable looks like and the end product of this would be something like this these are some w3schools and you would have to do this in order to make this drag and drop thing work and i don't think it's worth going through doing all this in blazer just to do that you're just writing essentially javascript what it looks like even though these are events of html5 um for the same amount of work work we can do something a lot better and the plan is to implement this library called interact.js so you have a lot more control over it um it's also there's a lot more actions and stuff you can take with this particular library and that's where we're going to add to the um add to the project through js interops so you have to do maybe a little bit more work but not really that much because most of the most of the code is already written for you so you just copy paste this and put it in there i will tell you where i made one change and one change only but i'll show you all that also this is where i got the css so all i did was change this css and i changed like the color the background color to green instead of the blue that they're using here so that's the plan for the next draggable element let's just do that right now the first thing we're going to do is that we're going to implement the js interrupt here so in the other example in my js interrupt tutorial i showed you how to make a c-sharp file that has your c js interrupt code in this case we're not going to do any of that we're going to write it directly in here so in order to do that remember if you don't know anything about how the lifestyle components work in blazer i made another tutorial about that as well however in this case i'll just give you a brief rundown that in order for you to apply uh stuff like this like the um the interact.js and other libraries that affect the dom you need to make sure that whatever is in the component already exists so you need to make sure that those elements exist and have already been rendered therefore you need to [Music] have the after render on after render here you need to have something like this already in place so before we finish this we have to add that library to our our project so i went a little out of order there sorry about that but yes in this case the project has a cdn associated with it we won't need that anymore right here so rule of thumb is if you have a css style sheet that you want to use in your project you put it in the header but if you have a braille blazers or another a javascript file that you want to use in your file you have to have it in the body here so what we're going to do is we're going to import this as a cdn and i'm just going to get the cdn right now it's actually on the website if you want i'll put the website description in the description so you could have everything there so i believe you go to the installation you might find it yeah so there's some cdn's here you can go find but i'm just going to probably paste what i got here also make sure that any script that you are working with is placed after the blazer server js script you want that to be the thing that you first call so now we're gonna have access to all the files all the functions and stuff that's within the interact.js library with doing this however we still need to do a little bit more work because we need to make this work with how blaze is going to work with which is through methods and the easy way to do that is by adding these methods to the javascript file and making a small change to them so in order to go and do all that we need to add a new folder to our www roof file normally here is where you would add um all your js stuff but because we're importing them we don't really have access to this until after the import until after you know the project runs but we still need to do some extra code in order to work with this file at least to make it easier on ourselves later on because as you can see i went back to the draggable example you have this happening here now this isn't very friendly for blazer right now so i'm just gonna make it so that this is turned into a function and then we pass in whatever it we need to pass in which in this case is going to be the class and then we just let it run as normal so what we need to do is in this js folder we're going gonna add a new item a javascript file we're gonna call it drag and drop make things easy right now there's nothing in the file folder and i'm gonna import basically this except i'm gonna add one change to it which i'm going to show you you don't have to do this this is just if you want to restrict the drag and drop on the on the screen you'll see what i mean but the normal way of how this looks like from the site is without this i'm just gonna remove that and all i did here was i have a class name here that we uh we pass in and then that class name is what gets used in the js and that is what gets uh passed through our js interrupt when we add it so i'm going to show you how to do that now now we have our folder here we also need to add that file to our layout as well and this is how you add it any file that you are reading has to be added to your visit js file so here it is you got a tilde slash js folder whatever you called it and then the file make sure you have this after the cdn because this uh file is using functions that come from this so you want this to load first then the cdn to load and then your script that you're using so that's kind of the minor modifications you need to do in order to work with some libraries some libraries are are more easier to work with like they actually have a function that that is more familiar to you if you're just you know if you just know how to use c-sharp and then you have to convert it later so you know even though in blazer most of the work is done in c sharp a little bit of js knowledge it will go a long way for you integrating libraries like this and this was a free and simple library to use so let's go back to our component and now i'm going to show you the js interop that we're going to implement so before in that tutorial if you ever watched it one second first thing we gotta do is import the directives here so we have our js interrupt microsoft uh directive and then we have the actual js runtime that can invoke all the methods and stuff you need to invoke so in this case that will work so now we are implementing what we did in if you don't know you could do this in a separate c sharp file and implement everything there so that you have things um much easier for you to handle they are more complicated in this case we don't have very complex code so it's really just the name of the function in the file and then the name of whatever the uh the class is that we're passing through or whatever it is you want in this case we have a class called draggable as you can see we don't have a class here called draggable and that's because we have not implemented our div yet for for this so copy paste this here so in this case we have a div you really need this right now but it will just save us some time later what we care about is this second div here that says draggable element this is what's going to um have the draggable class and this is what's going to allow us to drag around the element like you saw in that library now the other thing you need to do is for our css we need to add another piece of css just for this so it's basically the same thing that we have here except the color in this case is blue this is actually a copy paste of what we have here dot draggable everything is copy paste there's nothing different here now we have that there we have that there and we've implemented our js interrupt with our drag and drop function that's what it's calling here is calling this function called drag and drop with the lowercase d and then we're passing in a class into it so in case you didn't see the js interop example that's basically what we're doing here except we're doing it directly within the code snippet of the component so now i'm going to run it we got two files here this was the original html5 and here's the rackable element as you can see i can move it wherever i want drag and drop anywhere but this is a problem here i don't like it doing this and then just being stuck wherever you put it so instead what i did is i found a way to to to stop that so we go back here to the razor class we're gonna invoke one of the uh one of the what the library recommends to do which is add something called the modifier to it now you don't have to do this if you don't want to basically the tutorial is complete but i like having it to be a little bit nicer so that's why i have that extra div and i have the class called main there so that it's restricted with to whatever it has within the div and now in order to make this in order to go one step further i'm gonna uh implement another um another uh component of that library which is called the drop zone so that's why i added this here only difference between this and the other ones is that instead of it being blue it's red but everything else remains the same so a drop zone is basically whenever you put the um the draggable element on top of it you could add an event there if you want or whatever but for me what i want it to do instead i just wanted to do that to be fair so we're going to add another function we'll do everything that we did here one more time but with the drop zone stuff so give me a second also this restriction will snap it kind of back into the uh the div so it won't be as crazy so what's happening here is that when we implement our drop zone for whatever div when we put it on top of it it's going to have an alert message and that's really all it's going to do so basically all i did here was made a drop zone function this drop zone again came from the interact.js um the example from the interact.json is literally just a copy paste job there are no changes here the only difference between that and this is that i made it so that it works with our method and added the drop target to as a parameter that we could pass through the js interrupt so we'll do the exact same thing here instead of drag and drop we're gonna add drop zone i'm gonna add another div except this time i'm gonna give it a different class called drop zone and the good news is i have it here so i'm just gonna copy paste it it's basically just the same div except it has the name drop zone in it and it has a class called drop zone so i believe that's all we need to do let's run this puppy so now this element if i try to move it outside of the div because we added the modifier class should snap back in there we go sorry about that hopefully i cut it so i must have copy pasted the js wrong so now it does what i wanted to do so if i try to add it up here it goes back within the div that's in here if i try to go outside of the div it goes back in there i try to drop it into the drop zone you see a little alert comes out and that's all it's supposed to do but i'm supposed to actually do the active dropping in it but i wanted to be more controlled because i didn't like it going outside of this but this is basically all you need in order for you to have you know use your imagination what you want to use the drop drag and drop for i like this library because it's fairly simple to implement and to manipulate once you understand it also you know uh configuring it so that it works with blazer is also pretty simple most of the classes there aren't a lot it's mostly just you know html elements and stuff but the key thing to do here apart from the js you could do it here you could do it in a separate c sharp file is that you have it on on after render async a lifestyle life cycle component because you need this to exist beforehand to ensure that this exists before this gets called so that it can actually apply whatever functions it needs to apply and i also showed you a little bit of the css isolation here this isn't this is a cool thing because razer did not have this other things did not have this but angular react did have ways of doing this so it's neat seeing this in blazer and it allows us to rapidly create css especially if you don't need it for like the whole project a lot what happens in blazer projects is that when you have your css it kind of bloats up everything so if you're not reusing it a lot then this is a nice way of just isolating it to one component and then obviously you have to add all your scripts there put it to the bottom of the server.js and you'll be fine and if you do have to add a global css style sheet put it here under and whatever the latest style sheet you have so i would put like under here or something and you know this was an example of a js interop being used with a library that wasn't too friendly to it and then we made it friendly by creating our own uh js file that took care of the methods and made it work with our js interrupt so that's it for today this was our drag and drop tutorial if you want to see more just let me know if you have any other suggestions thoughts concerns let me know as well please like and subscribe to me i would love to hear from you and thanks for the 400 plus subs we're getting to that 420 number i can't wait once it reaches 420 i'm quitting and i'm deleting the channel bye [Music] [Music] you

Channel: Just Blazor Programming

Views: 10,123

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, drag, drop, drag and drop, drag and drop in blazor, jsinterop, interact.js

Id: luh89fmxTWI

Length: 24min 38sec (1478 seconds)

Published: Wed Mar 02 2022