Instant jQuery Drag-and-Drop Grids How-to [Instant] — Save 50%
A practical, hands-on guide to building drag-and-drop layouts using Gridster, jQuery, and CSS with this book and ebook
This article by Marcos Placona, from the book Instant_jQuery Drag and Drop Grids How-to, will describe all the necessary steps to get Gridster up and running on your website, as well as demonstrate how to include any of the dependencies needed by the library.
(For more resources related to this topic, see here.)
There are only two things needed to get Gridster installed on your source code. You first need to download jQuery if you don't already have it, and then download the latest version of Gridster. After that, you will use plain HTML code to include both libraries in your webpage.
For most casual users, adding the latest version of jQuery will suffice. There are also nightly builds available, but these won't be discussed here as they are not necessary, and the latest version should be able to do everything we need.
How to do it...
Start by visiting jQuery's website, http://jquery.com/download/, and download the library to a location you will remember. We won't be debugging our jQuery code in the examples given in this book, so downloading the production version will be fine.
We should now head over to Gridster's website, http://gridster.net/#download/, and download the minified versions of both the gridster.js and gridster.css files. These are the files we will use throughout this entire book, so make sure they are kept safe and accessible. A suggestion would be to create a directory structure to make it easier to refer to the files. I will be using the following structure for the examples given here:
Under the directory recipe1, create a new text file called index.html. This file should initially contain the following code:
<script src = "../scripts/jquery-1.8.3.min.js"></script>
<script src = "../scripts/jquery.gridster.min.js"></script>
<link href = "../styles/jquery.gridster.min.css" rel="stylesheet" />
You can download the example code files for all Packt books that you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub. com/support and register to have the files e-mailed directly to you.
By double-clicking on this file, you should be presented with a screen that looks like the following screenshot:
You can check that everything has loaded up correctly by pressing the F12 key on your browser (Chrome or Firefox), and checking that all files have been correctly loaded without errors, as shown in the following screenshot:
Instead of downloading the files into your project, you can simply load them up via CDN-hosted copies of the files, as follows:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/
In that case, the files wouldn't be coming from your website, but from jQuery's website itself. This is a good practice when trying to improve performance, as big web servers tend to host files on multiple locations and use very aggressive caching techniques to make sure the files are served quickly.
Gridster also offers files in the same way from their website as you will find in their download section. So, for example, you could link directly to their minified file as follows:
In this recipe we described all the necessary steps to get Gridster up and running on your website, and also demonstrated how to include any of the dependencies needed by the library.
Resources for Article :
- Getting Started with jQuery [Article]
- jQuery Animation: Tips and Tricks [Article]
- Tips and Tricks for Working with jQuery and WordPress [Article]
About the Author :
Marcos Placona grew up in Sao Paulo, Brazil, and started tinkering with web development when 14.400 kbs modems were the coolest thing. He then started a Computer Science degree, but a better opportunity arose on the other side of the Atlantic. In his 20s, he decided to move to England where he worked as a ColdFusion developer and started blogging at http://www.placona.co.uk .
After acquiring a taste for mobile application development, he has now published over 20 applications for all the major mobile markets, and hopes he will someday see a kid on the train playing one of his games.
He is now working as a technical lead for HolstelBookers, he tries to stay on top of its ColdFusion and .Net teams, as well as designing solutions and working with the stakeholders to turn dreams into reality.