Drag and Drop Sortable Lists in Ruby on Rails

[Music] hey guys in this video we're going to be talking about how to do sortable drag and drop lists in your rails application we've talked about this in the past back in the jQuery and CoffeeScript and other things days in this episode we're going to be specifically using web Packer in rail 6 so this will apply going forward in rails and we're going to be using stimulus chess to set up our components that are sortable so we are going to be using a library called sortable Jas you could actually just build a stimulus controller that does the drag and drop if you'd like but as you will probably find out there are lots of little edge cases and details that you have to get just perfect in order to make this work cross browser correctly and everything so I found it's easier just to grab a library like this install it and use that in my rails apps so that's what we're gonna do in this episode so here I have a brand new rails application and first things first we're going to need to generate some sort of model for our to do something that is sorta Buhl's so we're gonna say to do will have descriptions and we will have a position which will be an integer this position is going to be important that's going to be what saves the ordering server side so we can render them out in the correct order and when you drag and drop we'll make a request to rails and update that records position so that's pretty straightforward but we're gonna need to add X as list to our gem file this gem is going to a handle the sorting for us which will be really handy and we can also tell it to insert our drag and drops item into a specific location which is going to help when we go and save that to the database and we need to reorder the entire list this gem will take care of all that for you you can build it from scratch if you wanted to make your own concern but it's simple enough and this gem has been around for a long time it works great so we're going to just use that to use this gem we're going to go to our to-do model here and we're going to say X as list so every time that it to do is created it will get its position set automatically for us and this adds some methods we can use to do our reordering so what an updates I'm going to do is I'm going to remove the table from our index action here and I'm going to change the two dews into their own items now it doesn't matter what type of tags we have here a lot of times you'll see unordered lists and list items and drag and drop examples we're just going to use a nested div tag here and that will be all that we really need so if we were to do this and we say you know let's display B to do we don't need to display the position or anything and potentially we could make that linkable as a description if we wanted to but let's just leave that part out for now so the way that we want to wrap the sortable javascript is by using a stimulus controller so let's go ahead and run rails web Packer : install : stimulus to enable stimulus JavaScript in our application we need to do that in our drag-and-drop example here of course so we'll do that in our folder and once that's done we will have a controllers folder under app JavaScript and we'll have a hello controller I'm going to rename this one to drag controller and we'll say drag controller j/s and this is where we're going to define our JavaScript for this we're good we are not going to need any targets for this we're going to simply say data controller equals drag right here and our connect event is where we're going to set up sortable j/s so we need to go to our terminal and run rails ad sortable j/s that's going to give us the sortable module that we can load up so we'll say import sortable from sortable j s and the code that we need to do to setup is we're going to say this dot sortable equals sortable create this element so you will always have access in stimulus to this element automatically that points to the element that the controller is mounted to so you'll have reference to that and that is what we can pass in to sortable to tell it hey we will let everything under here to be sortable objects so every element underneath that will be sortable automatically so we could give these say class of card card bonnie maybe you want a little bit of bottom margin and we can add some callbacks in here for events so on end is going to be the basically the callback that will be called whenever the drag and drop is finished so once you've dropped the item that will call on end there's other ones like on start if you want to do anything interactive in those situations we just mostly care about persisting this stuff to the server so we're just gonna have on end so I'm gonna add a method called end here and that will be what we call automatically so if we bind this that will keep the this keyword kept to our stimulus controller so we will have access to all of that still and then we can call this and say console dot log event and just make sure that all of this is wired up correctly so let's go to our browser it will recompile our javascript changes and we'll see our to Do's so let's go add some new to Do's say test1 let's create another to do test2 you'll want to remove that position but you can see that's automatically being set by axes list and if we drag and drop these it shouldn't be moving these numbers around and you can see there when I hover over the other one it replaces those and it swaps them so it's sorting by where we drop that in and let's go ahead and do a third test maybe even a fourth and a fifth just so we can have some more data to work with and you can see how this works so really we want to be able to drop this and then that will be persisted server-side so we can refresh this page and it will be in that same position so if we open up our console we should see that that event is being printed out here and if we open this up we will see all the details of that event so notably we have this new index which is the location you drag and drop that item into that's going to be important for us to go tell the server hey we want to put this in position whatever that index probably plus one so that we don't have them the positions by axes left start at one and they're not zero based so that's an important thing to know then we also want to keep track of the item itself that we dragged so we have event item we'll need to basically grab the ID from that so that we can pass that over to Rails so inside of here effectively what we want to do is make a rails Ajax request to the rails server for some URL that we have here and we want our type to be like a patch request and we're gonna have some data that will pass over so our data we can easily set up as a new form data object and here we want to say data a pen position is event dot new index plus one and remember that plus one is important because these indexes are zero based but axes list is not so we need a URL for rails to post to so we can do that pretty easily by saying data dragged URL equals slash to do slash : ID slash move so that's a route we're gonna mean to add to our routes file in our to do's we can say resources do member do and we have a patch request for move so that's going to generate the exact same route as we have here we will replace that ID : idea with the idea of the to do in here so it'll say data ID equals to D ID and whoops in our HTML and then we can retrieve that idea from the event so we'll say event dot what was it called item so when we drag and drop item number two we should see that event dot item is that test too so event item dot data set dot ID will retrieve the data ID from that and then we can go and say here this dot data dot get URL which is the stimulus helper to get data dragged URL and we can replace the colon ID with our ID so that's going to set up everything we need to make our Ajax request so let's go ahead and move over to our - dues controller we're going to need to add a new item here called move and our new action so we'll add the set to do move to that so that it will be set for us so we'll already have access to do and we can say insert at which is one of the methods from axes list we'll take that to-do item that we found out of the database and then we will say params position and actually this should be a position as a name of a string and then the value that will give us that string and then position will convert to an integer and we will update that then we can just say ahead okay if that is successful so now we can go refresh our browser and we can try all of this out and see if that works so we'll open up our console here see that there are no errors we should if we open up the rails logs see a patch request to to do slash four slash move so it's grabbing the URL it's replacing that with the then it's making the ajax.request all in the browser and then that's being sent to rails we get the position we look up the to do right here and then we go and update the position and it will go ahead and update all the rest of those positions accordingly as well so that is updating our to do is but we do need to go into to dues index once more and change the sort order here so to do's index is going to be ordered by the position ascending so from one starting and going up from there so ascending so with that change we can refresh our page and we'll see that now we can drag five to the second place refresh our page and it is persistent so that's all there is to it that is all you need to build sortable lists in rails it's super duper simple to persisting using the JavaScript also very simple and we'll be talking about how to build a Trello board like thing in a future episode using their nested sorta bolts so for example here you can move things around inside and outside and so on in your sortable x' here so that allows you to build multiple lists and then drag and drop things across them and so on so there's all kinds of different things you can do to set up your UI this is a great library for doing some of those things so that is it for this episode and we will talk to you in the future when we get to that episode until then I will talk to you guys later peace [Music]

Channel: GoRails

Views: 8,368

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, Rails 6, Action Text, Active Support, Action Mailbox, Webpacker, Active Storage, Active Record, rails testing, ruby on rails testing, ruby testing, devise, rails devise

Id: r884jAqAbHY

Length: 13min 14sec (794 seconds)

Published: Tue Apr 28 2020