Question

I have a HTML list that I’d like to allow the user to be able to re-order through drag-and-dropping, and then submit their changes to the database.

I’m happy with all the database stuff, but I’m struggling with the Javascript/JQuery.

I’ve currently got jQuery UI Sortable working fine (so the other and re-order elements via drag-and-drop), but I don’t know how to go about getting the new order for the SUBMIT.

Can anyone help? If you need more information, just say. Thanks!

Answer 1

send that data to your application via an AJAX call for example

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

The only tricky part is that you must specify an ID on the list items in the format of groupname_identifier. For example:

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

Then when your application receives the POST data, it will be an array that looks like this:

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)