Starting in pivotal tracker we can now cross off our basic Javascript integration task and we can move on to our jQuery actually move the order. It's interesting that this functionality is available in pivotal tracker. This is exactly what we are going to be building into our portfolio this ability to drag and drop and change the order of items. So let's start with that in this guide what we're going to focus on is first building out the initial Javascript implementation and then in the next guide, we're going to see how we can make it persistent. So what that means is in this guide we're going to put on the front facing side of our implementation which means we're going to be able to do things like click and drag items and move them around and they'll stay there. But if you hit refresh on the page then everything will go back to where it was because we need to connect what we're building on the front end with the back end which is what we'll do in the next guide.

So it's open up Sublime Text and let me also start up the rails server so coming here the very first thing we need to do is we need to create a CSS class so we need to have a class that we will be able to call and I'll explain exactly what that means here in a second. So we're going to in the parent element and this is in if you look this is an app views portfolios index so this is where we're calling our portfolio item partial. In the parent element div I am going to add a class called sortable. So what this is going to allow us to do if you are familiar with CSS and you're familiar with how you can go and you can select items via a class or an id jQuery actually has some very close similarities. So it has the ability to come and grab what is called the dom which represents the document object model which means you can grab on to each HTML document various components such as sortable which is a class here. Then you can then use the items inside of that to change behavior. So this is going to be the first thing I think of this is kind of being a hitching post that you can connect your jQuery and are Javascript too. So this is step one.

Now the next thing is we're going to go to assets javascripts and we're going to open up our portfolios dot coffee and when we ran our resource generator This was created for us if you read what it says it says place all the behaviors and hooks related to the matching controller. So that's a very important word. So this is going to be related to the portfolios controller that says all of this logic will automatically be available in the application js file. So that is something helpful and in our deep dive we're going to go to coffee script dot org and we're going to walk through what coffee script does and how we can use it in our application.

Starting out I'm going to create a variable. I'm going to be writing in coffee script and I want you to worry less about the syntax and I want you to be more concerned with what we're actually doing. This is a Rails course and it's Rails course that is going to have some Javascript interwoven into it because as a full stack developer you're going to want to be able to work with both languages. However, a coffee script slash Javascript course could go on even longer than this Rails course so I want I don't want to spend a ton of time going over the language. I will walk through what I'm writing and the more important thing is I want you to kind of have an idea for the purpose behind it. So this is how you can declare a variable in coffee script and I'm going to start off by setting the variable to undefined and all that means is kind of it's a little bit different. In Ruby how you set something to nil, it's essentially just saying I want to create a variable called ready so I can use it later. But when you set it to undefined nothing's going to happen.

What we're going to do now is actually do something with it. So I mean a ready equals and then this little syntax this little arrow syntax. This means that we're declaring a function and we're going to store it inside of the ready variable. Now the way that we do this is to make sure you give two spaces and inside of this, we are going to go and grab our sortable class. So this is the same class that we have right here. So the way that you can grab this in jQuery is to use the dollar sign and then pass in just like CSS pass in a string with the class. If you wanted to grab an id you would use the hash. But ours is a class so it's going to be a dot and then from there we're going to call the sortable not softball. The sortable function on it. Then type return because the coffee script is different than Ruby we do have to click or type returns so that we know exactly what's being returned so essentially what's happening here is we're calling the sortable method inside of it. Now, where is this sort of wall method coming from? It's not this, this is simply the name this is our selector on the page. This could be asdf as long as you add asdf right here. It would go and grab it for us. So that is not what's important where we're getting sortable is from our sortable library. So if you search for sortable you can see all of the spots where sortable is and I'm going to escape and come all the way down and you can see the very end. It actually returns sortable. So that is exactly what's happening is this is made available to us because it's inside of our folder here and so now we can do is we can call this function and that's all we're doing is we're saying that we want the sortable function called on our sortable div and that is it. So the next thing that we need to do is prepare our page to actually load this end.

So the syntax for that is going to be document dot ready and then pass in ready. Now, these two ready's are a different document ready is something provided by jQuery. Ready is our variable. So essentially all we're saying is document ready which means when the page loads then I want to pass in this ready function here which has sortable inside of it. So that is the first step.

So let's go back and let's hit refresh and see if this is working. So if I click now look at that. We now have the ability to click and move our portfolio items around.

We have updated portfolio here in the first slot by drag it all the way to the right over here or down or any spot like that it is moved and it stays there. Now this is pretty cool and it's pretty amazing that with only a few lines of code that this is possible but in all reality is actually about a thousand lines of code it is taking into account all of this. I don't want you to focus on this code. I'm showing it to you so that you can see where it's at but I don't want you spending a lot of time looking at it because this is some pretty intense Javascript code. But I want you to know that this is what's making it possible for us to just call this pass it into our class and then the library itself takes into account the ability of saying ok that there's going to be a div it's going to be named sortable and it's going to have elements inside of it so it's going to have divs inside of it and you can go and drag them and then it updates the dom. So let's take a look if I click and inspect let's see what's actually happening under the hood right here. So I'm going to extend this out. So now if I click on this and I drag it right next to it this is going to have move this in terms of the order. So we're going to be able to see each one of these items and you can see it even adjusts the CSS styling and it changes the position. Let's take one I haven't moved yet. So take this portfolio to item. If I go and I move this up. It has updated the div and now it's added this item down here where it changed the margin and the position of it. So there's a lot of cool stuff happening behind the scenes when we're doing this. Now one thing you may notice. See we're updated portfolio and all these items are right now. If I hit refresh everything goes back to where It was and that is because we have not added the concept of persistence yet. So right now all we are doing is we're essentially changing what is being shown in the browser. There is nothing happening in the actual server. I can prove it because if something happens in the server something would be changed here in the terminal and I'm going to actually shrink this terminal down just so you'll believe me and I'm going to shrink this down so he can see both of these at the same time.

Now if I hit refresh on the page things happen here it runs a database query like it did right here. It brought back all of our users and our portfolio items so everything's good there. But now watch what happens if I click and I move items. Notice how nothing is happening here on the server. That's because everything that I'm doing right now is only residing in the browser. It's not calling the server and in order for us to update the position in the database, we need to go make a call to the server. So that is what we're going to do in the next guide when we come back. I'm gonna go back to pivotal tracker here and we've kind of implemented this we could probably break this into two tasks so we could say jQuery drag and drop and then sortable connection to Rails app. So I'm going to add that task. We can clear this one off because we have implemented the initial jQuery drag and drop interface. But next we need to go and build the connector with the actual app. So I'm going to close this out and now let me update git. So let's see all the files we changed. We updated our index action and portfolios. So lets say

git add .
git commit -m "Integrated initial drag and drop implementation"
git push origin javascript

OK, so that was very cool. You saw how easy that was to integrate the next guide is going to be a little bit longer. The next one is going to take a while because even though it may seem like we're 90 percent of the way there because we can change everything in the browser. Surprisingly that's actually the easy part. As much as I'd love to say it's going to be super easy to wire it all up so it can tie into the Rails app. That's the harder the more challenging part. Not to say it's impossible. Obviously we're going to do it but be prepared it will take a little bit longer and it may not be quite as intuitive or after write a decent amount of more coffee script and we're going to have to be able to wire that up with controller actions and update our routes and perform some of those actions. But we're going to take it step by step and we'll walk through it and build out the feature. So I'll see you in the next guide. [55.0]
[13:00.0]

Resources

• Source Code