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();

This 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

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();

This 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

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable

• Output from firebug? Error messages? WHYT? – nfechner Commented Aug 26, 2011 at 19:21
• I provided a link to the page itself, so should be able to see all that yourself – Dónal Commented Aug 26, 2011 at 19:44

3 Answers 3

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?