===== jQuery UI sortable enables us to reorder the HTML element by drag & drop. ===== This will use to allow the users to adjust the positions of [[https://makitweb.com/make-photo-gallery-from-image-directory-with-php/|images]] to display on the webpage. In this tutorial, I show how you can [[https://makitweb.com/upload-and-store-an-image-in-the-database-with-php/|save]] the sorted image list order in the MySQL database and read it. \\ [[https://makitweb.com/demo/sortable/|Demo]] \\ {{programmieren:php:snippets:how-to-reorder-images-and-save-to-mysql-with-jquery-ajax.zip}} ---- ==== Contents ==== - [[#table_structure|Table structure]] - [[#configuration|Configuration]] - [[#html_php|HTML & PHP]] - [[#php|PHP]] - [[#script|Script]] - [[#conclusion|Conclusion]] ---- ===== 1. Table structure ===== I am using ''images_list'' table in the example.


CREATE TABLE `images_list` (
  `id` int(10) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(150) NOT NULL,
  `location` varchar(150) NOT NULL,
  `sort` int(2) NOT NULL DEFAULT '0',
  `timemodified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

---- ===== 2. Configuration ===== Create a new ''config.php'' file. **Completed Code**




----

===== 3. HTML & PHP =====

Use '''' to list images.

Select record from ''images_list'' table order by ''sort'' field in ascending order.

Loop on the record to add images.

In the '''' add ''id'' attribute to get the record id while saving with jQuery AJAX.

Add a button to save image positions on click.

> **NOTE --** Included ''jquery.ui.touch-punch.min.js'' script to enable touch event on the mobile devices. 

**Completed Code**





  
     
    

    
    

    
  
  

    
      
      
      
          
        ';
      }

      ?>
      
    
    
      
    

  



----

===== 4. PHP =====

Create a new ''ajaxfile.php'' file.

Assign ''$_POST%%['%%imageids']'' in ''$imageids_arr'' and loop on it.

Set ''$position=1'' which is incremented inside the loop.

Update ''sort'' field by ''$position'' value according to ''$id'' value.

**Completed Code**




----

===== 5. Script =====

Initialize sortable on ''$%%('%%#sortable')'' selector.

On submit button click loop on ''$%%('%%#sortable li')'' using [[https://makitweb.com/how-to-use-the-each-function-in-jquery/|$.each()]].

Split id value and initialize ''imageids_arr'' Array.

Send an AJAX request to save positions for this pass ''imageids: imageids_arr'' as ''data''.

**Completed Code**


$(document).ready(function(){

  // Initialize sortable
  $( "#sortable" ).sortable();

  // Save order
  $('#submit').click(function(){
    var imageids_arr = [];
    // get image ids order
    $('#sortable li').each(function(){
       var id = $(this).attr('id');
       var split_id = id.split("_");
       imageids_arr.push(split_id[1]);
    });

    // AJAX request
    $.ajax({
      url: 'ajaxfile.php',
      type: 'post',
      data: {imageids: imageids_arr},
      success: function(response){
        alert('Save successfully.');
      }
    });
  });
});


----

===== 6. Conclusion =====

Loop on the   to save the reorder of the images. Use an Array to store image ids and pass it in the AJAX request.

Now loop on the passed Array and update sort order according to index.

**If you found this tutorial helpful then don't forget to share.**\\ 

Are you want to get implementation help, or modify or extend the functionality of this script? [[https://makitweb.com/submit-your-requirement/?id=4774|Submit paid service request.]]


Copyright by https://www.websparrow.org/web/how-to-create-and-save-text-file-in-javascript