sorting list items with JQuery

I'm trying to use the JQuery UI Sortable plugin to allow a user to change the order or list items by dragging them with the mouse. The page in question is available here.

The relevant JQuery code is in webapp.js

$("#preferences_list").sortable({
            placeholder: "placeholder",
            forcePlaceholderSize: true,
            update: function(event, ui) {
                var order = $(this).sortable("serialize", {key:'list'});
                $.post("/mypreferences/reorder/", order);
            }
        });
$("#preferences_list").disableSelection();

T开发者_StackOverflow中文版his should enable the user to re-order the categories by using the

to drag them up or down (and when a category is dropped in a new position an AJAX request is fired).

The code above looks the same as that shown on the sortable plugin's demo page, but for some reason it's not working at all

---

There may be other issues, but first change:

<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script> 

to:

<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script> 

---

You've got sortable.js loading before widget.js. Sortable depends on widget, so widget.js must be included first. Just reorder your script tags.

---

Look with Firebug on the page you created: there are 4 errors. For example:

jquery-ui-sortable-1.js:17 - Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'

Are you sure you have jquery.ui.widget.js?