How could I add drag and drop functionality for the design of a restaurant's floor plan/table layout?

Question

I'm doing my first web application, it is for managing restaurants. One of the functionalities I would like it to have, is the ability to design the table layout by dragging and dropping tables from a toolbar somewhere in the screen. I would like to have a way of storing the table's position so that it remains the same if close the app. I would also like the tables to be clickable, so that then the waiters can click them and interact with them to open/close them, charge items that customers order, print the check, etc.

Is there a library or framework that would allow me to do something like that?

Answer 1

Have you done any research? I too would like an answer to this. I have, as yet, found no library, but the following have helped me greatly:

• W3C Schools have a simple working demo, with documentation
• Tutorial Point's documentation
• Mozilla's Drag & Drop documentation
• A good tutorial

You ought to be ok, since you just want predefined shapes, so it will be easy enough to have a toolbar with squares, circles, etc, which can be dragged to your floorplan. I have a problem because I want the user to be able to re-shape the dragged items, which represent rooms.

Let us know if you need more help. If you do find a good library or framework, please post an answer and accept it, to help others in future.

---

[Update] I guess that I was not looking seriously before. All of these frameworks seem acceptable:

• http://interactjs.io/
• https://bevacqua.github.io/dragula/
• http://www.infragistics.com/samples/aspnet/drag-drop-framework/overview

Related

• What is the best JavaScript framework to implement a drag and drop customizable website builder?

• Choosing a javascript MVC framework for a drag and drop interface

• Touch-friendly Drag and Drop