Drag and Drop, Autosave Position on Database

$(function() {
$(".unstyled").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("#updateDB", order, function(theResponse){});
}
});
});
<div id="updateDB">
<?php
$action = mysql_real_escape_string($_POST['action']);
$updateRecordsArray = $_POST['recordsArray'];
if($action == 'updateRecordsListings'){
$listingCounter = 1;
foreach ($updateRecordsArray as $recordIDValue) {
$query = "UPDATE tbl_dragdrop SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
mysql_query($query) or die('Error, insert query failed');
$listingCounter += 1;
}
}
?>
<ul class="unstyled">
<?php
$select = $mysqli->query($sql);
while($row = $select->fetch_assoc()){
echo '<li id="recordsArray_'.$row['id'].'"><div class="dragdrop"><strong><span role="textbox" contenteditable>'.$row['title'].'</span></strong></div></li>';
}

?>
</ul>
</div>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Katherine Petalio-Amar

Katherine Petalio-Amar

I'm a Software Developer with experience in Web Development and Mobile App Development and a bit knowledgeable in Server Management.