Vue.Draggable with Laravel - Example 1

what's up guys Andre here and today I want to show you how to use view Jay s view draggable and laravel to add some drag-and-drop functionality with persistence to your web application let me show you with a real life example which is actually based on a project and I'm working on here we have a portion of the landing page that shows testimonials I am using a slick carousel here which is one of the more popular JavaScript carousel libraries this is just the normal version there's actually a view version but I'm just using normal here originally this was just static and client came back and is like hey can I change the testimonials myself I said no but let me make it so that you can it wasn't too difficult I just made a testimonial model I populated some quotes and then I made in main back end where the client could do all the crud operations that they want to do like create a new one you can create a new one here this is my quote and the order is what we'll take a look at in a second and creates one you can edit it and you can delete it and short client he said great next thing he said was can I change the order of them I said no but let me make it so that you can so I added an order field in the database and they can change the order here just based on editing it showed the client he was happy with it but for me I felt like it still wasn't the best way you can do this I mean it's like I said the client is okay with it because he's not gonna have more than I don't know 10 quotes so it's not too big of a deal but say for example I want to move this quote somewhere here we're gonna have to change it to two or wherever we want it and then we're gonna have to bump the rest of these down so that's kind of a pain and I wanted to find a way to do this better such that the user has a better experience so the best way is probably by using drag-and-drop functionality so all we would do is drag the testimonial we wanted into the place we want it and it would automatically make a Ajax request to the server and change the order based on where we put where we put it in so that's the ideal situation so I came across view draggable which is what we'll be using here it's based off of this sort of all library and you can see an example here this is exactly what we want to do you want to drag and drop and we want to make a call to the backend so let's go ahead and do that here is my project there's already all that crud boilerplate is already in there I'm not gonna go over it but I will make the code available so you guys can take a look it's just basic crud 101 so yep go ahead and look over that so let's get started first thing we can do is let your school here let's install the package save them okay and while that's going let's so what do you want to do here let's take a look we want this whole thing to be a view component so let's go ahead and take this functionality and make it a view component let's do that let's use where is it assets yes components let's use the example component here let's open this we're going to need that let's just rename this to what we want it to be let's call it table draggable and let's just have some boilerplate to see if it works table draggable here and let's change our talk Jas it's called table that draggable will be the component name and it's table draggable okay so that's done it's also run our watcher and p.m. Arad watch okay so that built successfully let's let's leave the back end version here and let's make a front-end version so it would be right underneath here let's make a front-end version so what was it called a ch3 so let's name it a ch3 again and its name it view testimonials front-end and it's also insert our component that we just made to see if it's working so it was table draggable right let's just see if that's working so and it see if that worked it did not work there it is okay so let's continue what we're gonna do here is let's try to mimic this entire table on the back end now let's take this in steps so what table draggable okay so just paste it in here and replace the code we need to replace with javascript instead of PHP okay so that's good that's good that's good you know what let's first focus on getting the data inside of you component first so let's just comment this out first table calmed it out for now and it's focused on passing the data in now there's two ways to do this if you were building a spa you would probably make an AJAX request somewhere in the script to pull that data in but since we're using laravel already and we already have that data we're passing in from the controller here right here and the index top plate PHP has it in a testimonials variable so what we can do is can properly we can pass it in as a prop let's call it testimonials test in more eels equals and it's just pass the testimonials variable in I should do it more more deals okay let's let's check out nothing is gonna show but if we check out our view dev tools here it has no data yet because we have to pass it in so the person has a prop but we have to specify the prop in our component so the way we do that is here we have something called props and we have to specify that prop we just created so we testimonials and don't forget to comma and that should do it there you go we have an array of all the testimonials pop passed in excellent now let's continue working on our component and try to get to show the data that's passed in so let's uncomment this now let's what we're gonna do here okay so there's a for each statement here obviously that's PHP so let's remove that and we'll replace it with a v4 directive and we're gonna iterate through our testimonials so Italy for test testimonial index and testimonials you know tests I can never spell this so start with this testimonial ID and let's just get it working for now we'll worry about the routes later these two well won't make it work later let's just try to get in here and all of these dollar signs you don't need and these arrows you don't need so if we did that correctly can feel successful let's see if it shows there you go so it's correctly pulling the data in from our from our prop here and we have to work on the mix let's work on the links okay so the first thing is this this link now this is going to the Edit endpoint and to that we're going to bind it to standpoint is testimonials / ID / edit so was this testimony that ID yes that's a monile plus slash edit just Nash at it and that's that looks good to me see that works fine and see if it and it works okay cool let's work on the next one which is delete I believe let's put to create back in there that's outside of the component so should be in here yeah let's just make another create underneath here okay there you go and now let's work on delete back to our component okay I think the end point here is testimonials it's the same as edit but we're making a delete request instead so okay okay now this right here let's keep this one comment about this right here method feel delete all that's doing a narrow Bell is this input type equals hidden name equals method method value equals to it it's just saying we're making a delete request that looks good to me so what I need this but the CSRA field we can't do that in JavaScript so here's what we'll do in our master layout let's specify the CSS CSRF token here using PHP let's put it right here and I just have a code snippet let us paste it in and we'll just grab this value from our view component since it's not part of the view instance so to do that let's make a data function here called data and make sure we return an object it's called CSRF and let's just use some JavaScript very selector to grab it and it was the matter she may be closed CSRF token and it's the content that didn't work that's because there's no comma okay so let's see if we're getting to see us a RF incorrectly we can just use our view dev tools here i refresh that yes I did and it's not getting it why not that's because I spelled it wrong try again and there's a CSRF cool so now we can use that to populate our CSRF field so it would look something like so again it'd be another hidden field hidden name this time would be underscore token and the value is providing the value because we have that in our specified in our data in our view instance and it's just two CSRF so that built correctly so now we should be able to delete I don't want to delete any of these let's make a new one and delete that one the front end one create Andre this is my quote it's just maybe alright okay so that created we'll see it in both tables in the back end table Andre this was my quote and also in this table over here it's going to Li it's a network that seat elite works it did not this is the wrong URL it's just this yes I forgot to find it yeah it has to be found okay so let's try deleting it and there we go so we successfully successfully have this working as if you component and now let's get this working with the draggable component let's go ahead and import our draggable component because we haven't done so yet so right here we would do import draggable from view draggable and let's make sure to specify the components in here components and this is just calling drag Bowl okay so now the way that this draggable component works definitely give the documentation a good read through but let me just show you how to do it here so you're supposed to wrap it around the parent element that we're trying to iterate over so we're iterating over TRS so we're supposed to wrap it using a draggable element here component and this is gonna be replaced with the T body element which will specify okay so the first option is the list that were dragging over so that will be testimonials testimonials the next would be the options which we will leave blank for now but I'll set a few in a second and the next option is we're gonna bind it to this is the element that's gonna replace the draggable component like I said it should be [Music] key body and with and isn't there I think this has to be an empty object yes okay so if you'd that correctly then they should be draggable yes hopefully let's see so you can drag them but you can't make them stick yet that's because we're trying to modify our prop here the testimonials array comes in and when we drag it its reordering the array which is changing the prop and view props should not be mutable so to fix that we have to make a data element and pass in the prop there and use that data element instead of the prop so let's name it testimonials no let's assign it the problem they start testimonials comma testimonials okay and now in our here testimonials new also here's just ammonium and now we should be able to drag things around if we did it correctly so let's move barack up there you go so make sure always always always cannot mutate props make sure you specify a data element and assign the prop to that data element now we can drag things around nice you can see what's happening here is we're modifying this oh you'll see so Wayne Gretsky is currently the one you'll see if I move Michael Jordan up there they'll swap there you go you'll see that happen cool so one option I want to specify you can see the dragging sort of happens I'd like there to be like a certain animation so we can actually specify that in the options so if you do animation let's say 200 milliseconds 20 milliseconds sorry and save that now there's gonna be a sort of animation delay which makes it more smooth in my opinion see one more option I want to show you is if you don't want the whole thing to be draggable you just wanted to specify a certain selector that you want to be trackable you can do that as well so in the options we can specify a handle and it's called it my handle okay so now we can't drag it we only can drag the CSS selector my handle so let's go ahead and do that let's make another column its name it sort and let's put another table data down here and let's just use font awesome here the class is fa fa arrows and my handle okay see if that worked see so that that's the icon there and now we can drag it around with that selector one thing we can also do is specify it's not know it's a plus you app that size it's just that my handle let's just change the cursor cursor move okay there you go you're so it's a nice UI feedback there for the user also now we can drag things around let's talk about the order here for a sec so as you see when we rearrange the objects here the order comes along with it well that makes sense because we're just manipulating the array and moving the indexes of the array around right seems to me what we want to happen when we're ordering it is if we put this one up here we always want the order to be in ascending order and then we'll pass that to the back end and the back end will update the order accordingly I hope that makes sense so whatever we drive here we will always want this to be in a sending order so let me show you how to do that we need first of all we need an event that catches that whenever we drag something and drop it so how do we do that the event is called change so so whenever that happens we're gonna call an update method so let's make a new methods here and it's making it what called update don't forget comma update and it's just console.log for now opting okay let's just make sure that's firing refresh that's been okay this is make sure every it fires every time we let go there we go okay so now let's make this always in ascending order so it seems to me like we want to iterate over the array so the array that were iterating over is the testimonials new and you want to map over each one and that'll give us a testimonial and then index and for each one I forgot a so each one we want to set the order property so the order is just going to be either index and we want to start up one so an X plus one and since we have to wait data binding in view that should update it accordingly so I should always be in ascending order like you want it so once I drag like this one up to here it's the order is going to change it's not that's because we forgot to specify the order that's why let's try that again okay there you go see every time we drag something it's old the order is always going to be in the order that we want so it's gonna be ascending it's always gonna start out one sorry so after we drag in reorder our front end has the representation of how we want our back end to look like so at this point after dragging some some rolls around we have our testimonials new array on the front end and this is how we want the order to be on the back end right so we have to make in Ajax requests after this statement is executed so we're gonna make an AJAX request but using Axios now I'm gonna use put and I'll explain while I'm why I'm using put in a second one once we get to our back-end code so the endpoint is gonna be a min testimonials and this is named an update all and we'll go into laravel in a second and we are gonna be passing in our testimonials and we're gonna passing their testimonials yeah and then if you want you can do something with response okay but we're not going anything with response maybe if you want to flash a success message or something like that and you can go ahead and do that here so let's make this end point in our laravel code so so let's go into our rods file let's make a new one just copy this one let's change it to put and it's rename it to update all is what I named it and it'll be tough in the controller well update all I made okay let's go to our actual controller where's the update file update method is right here just copy this one and it's change it accordingly okay we don't need a testimonial because we're gonna be updating not just one but all of them so we don't have to pass in the specific testimonial we're not gonna be doing any validation here and this okay let's just return a successful response when it's completed and this is dine dump request testimonial to make sure we're getting the correct data if I can spell it correctly okay let's see if we're hitting that end point correctly from our view instance I forgot to rename it update all okay so let's go into our network tab and see if we get a successful message once we drag one around see okay so now we are passing in what I move I move wayne gretzky up here so you can see the thing we're passing it is the representation of how we want our database to look like so this right here is how we want our entire testimonials model and all the rules to look like so one approach which you can do is you can actually just truncate the entire table and just rebuild it based on this variable that's coming in that's why I did a put request initially because a pull request is supposed to replace the entire resource while a patch request only replaces a part of that resource so if you're taking this approach you can make it a pull request so how would that look like so like I said we're gonna we're gonna trunky testimonial truncate so we're gonna delete all the roles in the table and just rebuild it from scratch okay now we'll just iterate over each see request testimonials and yeah we don't need the key as testimonial and all we're gonna do here is just testimonial create and we're just gonna rebuild it based on the thing that's coming in from the request so let's just make that an array oops Oh able to ID is the first one and the thing that's coming in its name just ammonia sure using an array here because an array is coming in and then I think just for others let's just do this quickly name just a monile name ID [Music] quotes next and then what's next visible and then order let's just make this one true by default and that should do it hopefully that works let's see let's close this with refresh so we have Jordan and then Gretzky if we do that oops sorry let's see if it's just refreshing did you stay up there it does not sit see what's going on you okay oh we forgot to take out the dye in dump I'm sorry sorry for all these mistakes but this is an accurate representation of real-life programming even with all my edits okay now see if this works we're gonna move Gretzky on top of Jordan that was successful if i refresh it see if Gretzky stays on top of Jordan he does so it did work so you can see in the back hand side it worked so now it just tested some more let's move my quote all the way on top and it's refresh again there you go Mike what stays on top so you know it's working also if you want to see the landing page you can see that my quote appears here first now is this a bad thing to do I mean we're calling an update action but we're really truncating and then rebuilding it my opinion it's not the worst in the world it does work and it makes sense to me in my mind but if you want to take a different approach where you're actually updating each field in the database without truncating it and we can go ahead and do that as well let's comment this out and let's work on a solution for that so for this approach since we're not truncating the database we need to grab all the testimonials from the back end so let's go ahead and do that testimonials equals testimonial all and now we're gonna have to iterate through each one of these search the front end array that's coming in and if the IDS match then we update it so there's gonna be a loop within a loop here we're doing it iteratively it's probably a better way to do it using collections but this is my solution for now so for each testimonials as testimonial again this is from the backend database let's just grab that ID because we're gonna need that in our second testimonial ID now let's also iterate through the front-end the raters come in request testimonials let's just grab let's name it testimonial front-end so now we're going to rate through each one of these front and raise each one of these front-end items and if one of the if the ID matches which there will be a match so if testimonial front-end the idea that equals ID that we saved up there then we go ahead and update it so for this will update the testimonial from the backend and we'll just use the update method and we want to update just the order and the order is gonna be the testimonial fun end and order that should work the same way the other one worked let's see if that did work okay so let's open the Hodag and let's move Einstein on top of me and worked and if we refresh it should stay there I've realized I have been showing you guys the database time sorry let me show you a database to prove to you that it works so Einstein should be first you should be right here you order it by that sorry the other way other way there you go Einstein's first and me in Gretzky then Jordan ensues so let's do one more dr. Seuss on top so if refreshness dr. Seuss is on top and the order is preserved one thing I forgot to mention earlier is or one con of doing it this way is that the time stamps are always going to be changed every time we drag an item now if you don't care about time stamps it does already matter but if you do care about time stamps then that's going to change every time we drag an item around now for this it's also going to change at least the updated ayat field is going to change so this is gonna change but if you don't want it to change you can just do something like I'm sorry in here you can just do testimonial times time he goes false so I actually had another example that I wanted to do if I go through the examples on sortable I want to play around with multiple lists and I just wanted to play around some more with you draggable and view in general since view is still kind of fairly new to me and I just want to get my hands dirty if I don't get lazy I'll continue with that example in another video if not thanks for watching I hope you learn something I'll make the code available on github because I probably skipped over a few things and you can just take a look at the code yourself thanks so much again please like please comment please subscribe see you guys in the next one okay thanks bye

Channel: Andre Madarang

Views: 31,699

Rating: 4.9243498 out of 5

Keywords: vue, vuejs, vue.js, laravel, sort, sorting, database, persistence, javascript, sortable, vue draggable, draggable, drehimself, andre madarang, andre, madarang, laravel vue, vue js drag and drop, draggable js, vue drag and drop, vue draggable example, vue js draggable, vue js, laravel vue js, vue.draggable, vue.js drag and drop, vuedraggable, laravel vue draggable, vue 2 drag and drop

Id: 1Yrzli1PqFc

Length: 41min 13sec (2473 seconds)

Published: Tue Aug 29 2017