Hi all,

It's entirely possible the idea I have in my head is too 'pie in the sky' for me to feasibly do, but I've been searching online and haven't made any progress whatsoever, so I thought I'd ask people who know a lot more about the subject than I.

What I'm hoping to do is to have an interactive 'sandbox' type design area on my website where visitors can select from a list of set designs that then get added into the canvas area, and they can move them around to create a layout of their choosing - then send me that end design.  I'm not looking for a complete list of drawing tools, just the functionality to add x-number of images from a set list, and then drag them around.

Is there any code/script or app/plugin out there that would do something like this? 

Many thanks,

 

  Kelly

Use preloadJS to load a bunch of images, then EaselJS to provide the drag-and-drop functionality: 

https://createjs.com/

The following tutorial will show you how to achieve drag-and-drop with EaselJS: 

https://www.createjs.com/tutorials/Mouse Interaction/

Sending you the end design is slightly more difficult... You could track everything that happens on the canvas in a JavaScript Object. When an image gets added, add it to the object, when a user drags it, update the X and Y coordinates. When the user hits send you'd simply need to JSON.stringify the object and either save it to a database or send it to yourself somehow. Although saving in a database is probably the optimal solution as clients would be able to revisit their design at a later date. When you'd like to view a client design, you would need to read the JSON string back in, parse it and then loop through the JavaScript Object to rebuild the canvas. 

Alternatively, using the following two libraries, you could export the canvas as a PDF: 

https://html2canvas.hertzen.com/
https://parall.ax/products/jspdf

I've made a similar app which is used by children to build an interactive Life Story Book (https://en.wikipedia.org/wiki/Life_story_work) and I can tell you from experience that what you're suggesting will be a massive undertaking in terms of development, before it is anywhere near useful. That said, the above will allow you to make a proof of concept that allows clients to drag some images around a canvas and save the result. 

Thanks Fee, really helpful stuff here for me to go through and see if my idea is feasible.  Thank you very much for your time.

Cheers,

 

  Kelly