Quiero crear el comedor de un restaurante y guardar las posiciones de las mesas en base de datos. Las mesas son draggables pero no se cómo guardar esas posiciones en base de datos para mostrar luego el comedor como yo lo haya guardado. Gracias!
<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>