Question

I’m trying to get the jQuery UI sortable plugin to work and I’ve created a list that looks like this:

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

And I’ve included the plugin script files:

$(function() {
    $("#sortable").sortable();
    alert('test');
    $("#sortable").disableSelection();
});

So I just tried putting the alert box before .sortable is run and the alertbox is showing. But putting it after .sortable isn’t working. Which means that .sortable is failing right?

I’ve included the scripts and put them in the head of the html document.

<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script> 

Which is correct right? And the function that actually runs .sortable is in a merged js file along with all other js snippets and plugins.

Answer 1

Make sure you’re including the correct files in the correct order, a much easier approach would be to download the complete or partial, whatever you need, package from jQuery UI directly here: http://jqueryui.com/download

When you download you get a single minified js file (jquery-ui-1.8.1.custom.min with the current version) instead of individual scripts. If you have the cache headers set correctly, the client caches this once.

---

Alternatively, include the scripts directly from a CDN, for example here’s google’s copy:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Doing this should save you a lot of dependency headaches with the various widgets. Also note that Google hosts the themes as well if you’re using a default one, see this question for a list, update the links from 1.7.2 to your version, e.g. 1.8.1 at the time of ths answer.