The jQuery UI .sortable() allows you to reorder elements in a list or grid by using the cursor. This is useful for menus, games and tables. Keep in mind, on its own this will only keep the new sorting order for the one browser session. It doesn't not keep the settings if the browser is refreshed.

Three dot cartouche

Code for .sortable()

Below is a sample of basic code for using the jQuery .sortable() API interaction

    $(function() {
        $( "#sortThis" ).sortable();

<ul id="sortThis">
    <li class="ui-state-default">Topic A</li>
    <li class="ui-state-default">Topic B</li>
    <li class="ui-state-default">Topic C</li>
    <li class="ui-state-default">Topic D</li>
    <li class="ui-state-default">Topic E</li>
    <li class="ui-state-default">Topic F</li>

Three dot cartouche

Other options for .sortable()

♦ connect lists: you can move items from one list into another

♦ display as a grid: you can move items around in a grid pattern

♦ include or exclude certain items: you can specify items that cannot be sorted that are in a sort list

Three dot cartouche

Example of a game using jQuery .sortable()

Below is a game using the jQuery .sortable() UI. To keep other pieces from moving to the wrong place, start by placing the right pieces from the upper left and work to the right.