Necesito programador con buen nivel en Javascript para finalizar un script de drop and drag. La idea es conseguir lo del video adjunto.
La estructura actual de ficheros está en la imagen "
Estructura_actual_p.png"
Actualmente el proyecto tiene un
index.html pequeñito con la imagen estática de mesa. Dicha mesa se arrastra y se suelta en el rectángulo azul de la derecha y guarda en el sessionstorage dichas coordenadas.
En el fichero
map.js se encuentra la lógica de arrastrar y soltar.
En el fichero
objeto.js tiene la acción del botón rojo "agregar mesa".
El fichero
map_tables.js contiene una clase que se encarga de construir el html de cada mesa y agregarla al DOM.
El trabajo es: no cargar una mesa estática del inicio sino que se pueda agregar con el botón "agregar mesa". Que se puedan agregar varias mesas y que todas se puedan mover hacia el rectágulo borde azul y cuando se haga el drop, se guarden dichas coordenadas en el localstorage según el id de la mesa, de manera que al cargar nuevamente el navegador se queden ubicadas en las coordenadas donde se guardaron.
Es importante que toda la lógica de agregar, mover, hacer drop and drag de la mesa, se construya dentro dela clase MapTables del fichero
map_tables.js de manera que el código esté encapsulado.
Además cada la mesa que se está moviendo o tocando debe resalarse de rojo todo el tiempo hasta que se toque otra mesa.
Finalmente, los eventos de drop and drag de la mesa que se encuentran en
map.js solo funcionan en ordenador con el ratón, pero se requiere que funcione también para eventos táctiles en móviles y tables, para ellos se debe incluir las funciones necesarias para que funcione también en esos dispositivos.
Delivery term: Not specified