I want to create the dining room of a restaurant and save the positions of the tables in the database. The tables are draggable but I do not know how to save those positions in the database to show the dining room afterwards as I have saved it. Thank you!
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script type="text/javascript">
function inicio(){
$("#crea_mesas").on("click",function(){
for(var i = 1; i <= $("#numero_mesas").val(); i++){
$(".mesas_comedor").append("<div class='mesa' id='mesa"+i+"'>"+'mesa '+i+"</div>");
}
$('.mesa').draggable({
containment: '.comedor'
});
$('.mesa').click(function () {
$(this).attr('contenteditable', 'true');
});
// Al salir se elimina el atributo editable
$('.mesa').focusout(function(){
$(this).removeAttr('contenteditable');
});
});
function AsignaPosicion(){
$("#guarda_comedor").on("click",function(){
var i=1;
for( i = 1; i <= $(".mesa").length; i++){
var posicion=$("#mesa"+i).position();
GuardarDatos(i,posicion.left,posicion.top);
}
});
}
function RestaurarDatos(){
for(var i = 1; i <=2 /*$(".mesa").length*/; i++){
$(".comedor").append("<div class='mesa' id='mesa"+i+"'>"+'mesa '+i+"</div>");
$("#mesa"+i).css({"top":localStorage["mesa"+i+"top"],
"left":localStorage["mesa"+i+"left"],
"width": "50px"
}
);
}
}
function GuardarDatos(i,posicion1,posicion2){
localStorage.setItem("mesa"+i+"left",posicion1);
localStorage.setItem("mesa"+i+"top",posicion2);
console.log(localStorage["mesa"+i+"top"]);
console.log(localStorage["mesa"+i+"left"]);
}
function Restaurar(){
$("#restaurar").on("click",function(){
RestaurarDatos();
});
}
AsignaPosicion();
Restaurar();
}
$(document).ready(inicio);
</script> <style type="text/css">
.mesas_comedor{
border: 1px solid black;
display: flex;
flex-flow: row wrap;
padding: 1%;
width: 80%;
}
.mesa{
border: 1px solid black;
background-color: #00FF7F;
margin: 1%;
}
.comedor{
background:-webkit-linear-gradient(left, #385F83, #CBD5DF);
background:-o-linear-gradient(left, #385F83, #CBD5DF);
background:linear-gradient(to right, #385F83, #CBD5DF);
border: 1px solid black;
height: 20vh;
width: 80%;
margin-bottom: 1%;
}
form > label{
width: 35%;
}
input{
width: 15%;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crear Comedor</title>
</head>
<body>
<main>
<h1>Crear Un comedor nuevo</h1>
<form action="#" name="crea_comedor" method="post">
<label for="nombre_comedor">Introduzca el nombre del nuevo comedor</label>
<input type="text" name="nombre_comedor"><br>
<label for="nombre_comedor">Introduzca cuantas mesas tiene el comedor</label>
<input type="number" name="numero_mesas" id="numero_mesas"><br>
<input type="button" class="btn btn-info" name="Crear_comedor" id="crea_mesas" value="Crear">
</form>
<h3>Mesas que dispone su comedor</h3>
<div class="mesas_comedor" id="mesas_comedor">
</div>
<div class="comedor"></div>
<button id="restaurar" class="btn btn-info">Ver diseño</button>
<button class="btn btn-info" id="guarda_comedor">Guardar</button>
</main>
</body>
</html>