jQuery - Drag and drop List reordering

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'
)

Answer 2

Take a look @ serialize(), I made the same thing without an explicit submit button, but directly inject the order by ajax using mootools.

<script language="javascript">
            <!--
            window.addEvent('domready', function() {
                var thisSortables = new Sortables($('list'), {
                    constrain: true,
                    clone: true,
                    revert: true,
                    onStart: function() {
                        $('confirm').set('html', '');
                    },
                    onComplete: function() {
                        this.serialize(function(el, index) {
                            var updateOrderRequest = new Request.HTML({
                                url: '../module/tools/admgn/dbsorter.php',
                                method: 'post',
                                data: {'itemID': el.id.replace("item_",""), 'new_pos':(index+1)}
                            }).send();
                        });
                        $('confirm').set('html', 'Reihenfolge erfolgreich gespeichert.');
                    }
                });
            });
            -->
        </script>

Maybe you get the idea how you can make it work.

Answer 3

Since <UL> and <OL> is not form element you cannot get through post method , I hope you can do by this

http://quasipartikel.at/multiselect_next/

make all options as selected and hide the available part as hidden