I want to build a drag-and-drop room planner, which is essentially having images/shapes that can be dragged into a canvas and ideally, snap nicely into place. Imagine a table, or chair in a room. Additionally, I’d like to be able to have each item to be linked to a database, so that you can hover or click on each item to view data about it.
How do I go about building this? I’m thinking jQuery, but am not sure on specifics on which direction to take.
Thanks
Check this: https://jqueryui.com/draggable/#snap-to
I haven’t tried it yet, but you might find it useful.
@GreatDanton
Thanks for the link. Conceptually I think I could make it work. Essentially I’d be use jQuery’s draggable “engine” to make elements I define as moveable pieces of furniture.
I think I’d probably create images of said furniture in place of the rectangles used in the demo, and then use each image either as an link or hover-action to tie them to information in a database I create.
Does this sound appropriate?
Is jQuery the only library that offers drag-drop functionality?
HTML5 does already have drag-and-drop functionality built in, but it’s a little more involved than if you used a library for it. Just in case you are curious, here’s a tutorial on W3schools for it: http://www.w3schools.com/html/html5_draganddrop.asp, and much more detailed explanation of how it all works on MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API.
The only thing to consider is that if you are going for compatibility with older versions of IE, you may run into problems, which is one of the motivations for using something like jQuery UI.
Wanna see a really cool library for this stuff? Check out http://interactjs.io/.
Thanks for the heads up, Ramon. I did not know HTML5 offered the functionality until you mentioned it. I don’t think I need to worry too much about older IE versions as I’m targeting mobile device browsers mostly.
I’ll checkout interactjs. Have you worked with it before?