If you want to make the drag and drop with jQuery UI Sortable then you have to do the following things. The jQuery UI sortable feature include the serialize method. A text string in standard URL-encoded notation is created with serialize ().

 Setting up the Database.

You have to make a database with dragli in that database you have to create a table with name items. The you have to make three field in the table items. First is id that is primary key and it is auto-increment. Second is Display_order. Display_order is the field that keeps on changing everytime when the user drag and drop the li.

CREATE TABLE `items` (
  `ID` int(11) NOT NULL,
  `Display_Order` int(11) NOT NULL,
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Inserting the data in the database

INSERT INTO `items` (`ID`, `Display_Order`, `created`, `modified`) VALUES
(1, 2, '0000-00-00 00:00:00', '2016-04-13 12:48:54'),
(2, 1, '0000-00-00 00:00:00', '2016-04-13 12:48:54'),
(3, 3, '0000-00-00 00:00:00', '2016-04-13 12:48:54'),
(4, 4, '0000-00-00 00:00:00', '2016-04-13 12:48:54'),
(5, 5, '0000-00-00 00:00:00', '2016-04-13 12:48:55'),
(6, 6, '0000-00-00 00:00:00', '2016-04-13 12:48:55'),
(7, 7, '0000-00-00 00:00:00', '2016-04-13 12:48:55'),
(8, 8, '0000-00-00 00:00:00', '2016-04-13 12:48:55');0.

Adding the drag and drop

We use the jQuery UI sortable to make the drag and drop you can download the jQuery UI pluglin from here http://jqueryui.com/download  then you need to add links to these javascript files in the head of your page.

<script type="text/javascript" src="/jquery-1.4.2.min.js"></script><br>
<script type="text/javascript" src="/jquery-ui-1.8.1.custom.min.js"></script>

If you need to make your li draggable then you need to write the following script in the index.ctp

<script type="text/javascript">
$(document).ready(function(){

  $("ul#categoryorder").sortable({ 
         opacity: 0.7, 
         cursor: 'move'  
         });

});
</script>

To show that the user have changed  li by drag and drop you should have to add the add the following script.

<script type="text/javascript">
$(document).ready(function(){

  $("ul#categoryorder").sortable({ 
         opacity: 0.6, 
         cursor: 'move'<span>,  
         update: function(){
                $('#categorysavemessage').html('Changes not saved');
                $('#categorysavemessage').css("color","red");
                }</span>
         });

});
</script>

 For updating the database you have to write the following code on your controller.

	public function updateDisplayorder()
	{
		$this->layout=null;	

		$newOrder = $_POST['ID'];
		$counter = 1;
			//print_r($newOrder);																							
		foreach ($newOrder as $recordIDValue) {
			  $query = "UPDATE items SET Display_Order = " . $counter;  
			  $query .= " WHERE ID = " . (int)$recordIDValue;
			  
			  $data['ID'] = $recordIDValue;
			  $data['Display_Order'] = $counter;

			  $this->Item->id = $data['ID'];

			  if($this->Item->saveField('Display_Order', $data['Display_Order'])) {
			  		echo $query.'<br/>';
			  }else {
			  		die('Error, insert query failed');
			  } 
			  $counter ++;
		  }

		echo 'Changes saved';die;

	}

 Code to make the li that the user drag and drop this should be placed on index.ctp

<div id="container">
		<ul id="categoryorder" class="ui-sortable">
				<li id="ID_1">1</li>
				<li id="ID_2">2</li>
				<li id="ID_3">3</li>
				<li id="ID_4">4</li>
				<li id="ID_5">5</li>
				<li id="ID_6">6</li>
				<li id="ID_7">7</li>
				<li id="ID_8">8</li>
		</ul>
	<div id="results">
		<a id="button" href="">Save changes</a>
		<div id="message"> </div>
    </div>
</div>