Order images with jquery-ui shortable

[eluser]Lykos22[/eluser]
Hi I 'd like some help please, as my skills in jquery are not so good. What I want to achieve is to change the order of the images like this example.

My database looks like this:

Code:

table: Gallery
img_id (pk)
image
caption
order

I have also created these 2 views:

- index.php

Code:

<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
&lt;input type="button" id="save" value="Save Order" class="btn btn-primary"&gt;

[removed]
    $(function () {
        $.post('&lt;?php echo site_url('admin/galleries/order_ajax'); ?&gt;', {}, function(data) {
            $('#orderResult').html(data);
        });

        // save order
       $('#save').click();
    });
[removed]

- order_ajax.php

Code:

<?php if(count($images)>0): ?>
<div class="sortable-list">
    <ol id="sortable">
        &lt;?php foreach($images as $image): ?&gt;
        <li &lt;?php echo 'id="li_'.html_escape($image-&gt;img_id).'"'; ?&gt;>&lt;?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?&gt;</li>
        &lt;?php endforeach; ?&gt;
    </ol>
</div>  
&lt;?php endif; ?&gt;

[removed]
    $(function() {
         $( "#sortable" ).sortable();
         $( "#sortable" ).disableSelection();
    });
[removed]

I have also created and the order_ajax controller

Code:

public function order_ajax(){
// save order from pages
var_dump($_POST);

  // if (isset($_POST['sortable'])) {
  // $this->gallery->save_order($_POST['sortable']);
  // }

// fetch all images (fetch all data)
$this->data['images'] = $this->gallery->get();

// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}

So what I basicly want to do is to drag the images arround in order to change their order, and when I click the save button pass the (new) data/order to the controller and to store them in the database. How can I make this work? any help would be appreciated.