title: jQuery UI sortable images
body: <p>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 <a href="http://jqueryui.com/sortable/#display-grid" rel="nofollow">this</a> example.</p>
  
  <p>My database looks like this:</p>
  
  <pre><code>table: Gallery
  img_id (pk)
  image
  caption
  order  
  </code></pre>
  
  <p>I have also created these 2 views:
  <strong>index.php</strong></p>
  
  <pre><code>&lt;!-- will display the ajax result --&gt;
  &lt;div id="orderResult"&gt;&lt;/div&gt;
  &lt;hr/&gt;
  &lt;input type="button" id="save" value="Save Order" class="btn btn-primary"&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $.post('&lt;?php echo site_url('admin/galleries/order_ajax'); ?&gt;', {}, function(data) {
              $('#orderResult').html(data);
          });
  
          // save order
         $('#save').click();
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>order_ajax.php</strong></p>
  
  <pre><code>&lt;?php if(count($images)&gt;0): ?&gt;
  &lt;div class="sortable-list"&gt;
      &lt;ol id="sortable"&gt;
          &lt;?php foreach($images as $image): ?&gt;
          &lt;li &lt;?php echo 'id="li_'.html_escape($image-&gt;img_id).'"'; ?&gt;&gt;&lt;?php echo img(array('src' =&gt; 'uploads/thumbs/'.html_escape($image-&gt;image)); ?&gt;&lt;/li&gt;
          &lt;?php endforeach; ?&gt;
      &lt;/ol&gt;
  &lt;/div&gt;  
  &lt;?php endif; ?&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
           $( "#sortable" ).sortable();
           $( "#sortable" ).disableSelection();
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p>I have also created and the order_ajax controller</p>
  
  <pre><code>public function order_ajax(){
   // save order from pages
   var_dump($_POST);
  
    // if (isset($_POST['sortable'])) {
    // $this-&gt;gallery-&gt;save_order($_POST['sortable']);
    // }
  
   // fetch all images (fetch all data)
   $this-&gt;data['images'] = $this-&gt;gallery-&gt;get();
  
   // load the view
   $this-&gt;load-&gt;view('admin/gallery/order_ajax', $this-&gt;data, false);
  } 
  </code></pre>
  
  <p>So what I basically want to do is to drag the images around 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?</p>