Question

Estoy haciendo una página web de ubicación de productos y necesito hacer que el usuario pueda entrar a un área de dibujo donde dibuje un cuadro, con un enlace que lo diferencie, y dentro de ese cuadro pueda agregar otros niveles de cuadro.
Esto lo usaríamos para ubicar productos en estanterías y el usuario precisa configurar las estanterías que tiene.

Por ej: el usuario tiene 2 cámaras (C1 y C2) cada una con 3 estanterías (E1, E2, E3)
El usuario tiene que poder dibujar las estanterías más o menos de la siguiente manera: de tal manera que si hace click en la primera cámara y en la primera estantería tiene que decirle que está en C1E1

La imagen seria:

Existe un plugin en jquery o html5 que se pueda usar para hacer esto?

Saludos y muchas gracias

Answer 1

Hola @Wilson, podrías usar una librería de diagramas, de ahí serías tú el que le da una funcionalidad específica jugando con la api.

estan:

• gojs
  • http://gojs.net/latest/samples/regrouping.html
  • http://gojs.net/latest/learn/index.html
• draw2d touch
  • http://www.draw2d.org/draw2d/
  • http://draw2d.org/draw2d_touch/jsdoc_5/#!/example
• jointjs
  • http://www.jointjs.com/
  • http://www.jointjs.com/api

saludos!

PD: tambien tienes opciones menos complejas como usar grillas jerárquicas, o un simple drag & drop como:

http://jqueryui.com/draggable/#sortable
http://interactjs.io/