Question

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

Answer 1

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>