Drag and Drop & Database Update - database

Question

I have a list of categories where I want to use drag and drop for editing their order. So far, I have this code and it works, but I already lost a lot of time and I didn't figure it out how to update the database with their new order:
<ul id="categoryorder">
<?php foreach ($categories as $category) : ?>
<li id="<?php echo($category->order_id); ?>">
<form enctype="multipart/form-data" style="margin-bottom: 0;" action="<?php echo base_url();?>backend/cp/categories" method="post">
<input type="hidden" name="c_img" value="<?php echo($category->c_img); ?>" />
<input type="hidden" name="id" value="<?php echo($category->id); ?>" />
<input type="text" name="name" value="<?php echo($category->c_name); ?>" style="width:150px;" />
<input type="file" name="c_img" size="20" value="" />
<input type="checkbox" name="delete" value="1" />
<input type="submit" name="update_category" value="Save" />
</form>
</li>
<?php endforeach; ?>
</ul>
And the js:
<script type="text/javascript">
$(document).ready(function(){
$("ul#categoryorder").sortable({
opacity: 0.6,
cursor: 'move'
});
});
</script>
Thank you for your help!

Answer 1

$( "#categoryorder" ).sortable({
forcePlaceholderSize: true,
forceHelperSize: true,
dropOnEmpty: false,
scrollSensitivity: 100,
scrollSpeed: 0,
tolerance: "pointer",
zIndex: 9999,
stop: function(event,ui){
var i = 0;
var positions = '';
var ids = '';
$('#categoryorder li').each(function(){
positions += i++ + ',';
ids += $(this).attr('id') + ',';
});
$.ajax({
type:'POST',
data:'positions=' + positions + '&ids=' + ids,
url: 'your url',
async: false
});
}
});
and the php code:
$positions = explode(',', $_POST['positions']);
$ids = explode(',', $_POST['ids']);
if (!empty($positions) && !empty($ids)) {
foreach($positions as $value => $position_id) {
if ($ids[$value] != '' && $position_id != '') {
$id = $ids[$value];
$position_id;
}
}
}