- Read Tutorial
- Watch Guide Video
It's time to start bringing in our javascript libraries. We're going to be bringing in is the html5 sortable library andn the jquery-ui library. We actually need to come into this distribution (dist) directory and then grab each html.sortable.js and this is all we need. Copy this entire file. Come to our assets/javascript's and let's create a new file, save it as html.sortable.js. Paste in everything from the repo, this is going to let us simply bring in the item we need instead of bringing in that entire repo. This is the only file we really need to make it work.
If you're curious on if this is actually working, can come to the top of the file and add alert("Hey there"); come back to the browser and if you hit refresh. It now pops up this little alert message, which means that this file is being called properly.
If we come to our application.js file you can see that we have some required statements and one of the items here where it says require tree. This is actually going to bring in all of the files that are here. now. I like to purposefully add my own declaration in here, the reason is due to the order. I usually like to have my extra libraries brought in above turbolinks, turbolinks has been known to cause some confusing bugs. I'm going to call html.sortable. Hit save and let's make sure this is still being called properly. You should see the alert message on the screen (assuming the alert is still in your file)
Even though the required tree brings everything in, I'm usually pretty careful with making sure that I'm calling items in the right order.
Next, let's bring in the jquery-ui-rails library. Go to rubygems.org to make sure we're picking the right one, type jquery-ui-rails. Copy the gemfile version and then open the gemfile in the app, all the way down at end paste it in.
Stop the rails server and run bundle to bring everything that we need in there.
Let's go to the homepage (in rubygems.org) just to see what it's all about. Opening this up, you can see that jquery-ui-rails is an incredibly powerful library and it's used by Rails developers all over the world. It brings in a number of things that are very helpful. The html.sortable will not work without this library.
Add //= require jquery-ui into our application.js file under jquery_ujs and right above sortable. If you put it below there it most likely won't work or will have bugs.
Let's come into our portfolio.scss file and at the very top right below bootstrap type @import "jquery-ui";
We don't have the ability to drag and drop anything because we haven't implemented that. We need to get into how we can select items and how we can build our own jquery functions that will allow us to select items on the page and then give them behavior.
- git status
- git add .
- git commit -m "Installed jquery-ui, sortable html5 library, and css calls"
- push origin javascript
I'll see you in the next guide where we start to build in our implementation code.