Let users create a new draggable element from a catalog of items, onto a canvas

Hello there!

I’m working on creating a web app for customized jewelry. I want to give customers the ability to design their own piece of jewelry from a catalog of items with different categories and prices etc.

How I’m going about this is that I want them to be able to click on the thumbnail of a product (from a grid/catalog) and then an image appears in the drop-area (kind of like a canvas) that they can then drag around. This way they can completely customize their piece of jewelry. Think for example that the customer clicks on the thumbnail of a green bead, and then it appears and they can place it on top of the image of a bare necklace. They put together the different parts to make 1 whole unique image on the drop-area. It has to be drag-and-drop so they can change the position of all the different parts, for ultimate customization.

What I’m stuck on now: when a costumer clicks on a thumbnail, I need an element with the image of that specific jewelry part to be created. Kind of like a copy of the image element that is already there.
I’ve looked around the forum and documentation and it seems like there is no ability to let users create elements. I’ve tried to hide elements on the page and when a thumbnail is clicked, the element appears and can be dragged around, but that doesn’t give the customer the ability to put multiples of the same product on the jewelry. Take the green bead again for example, if someone wants 6 green beads on a necklace I can’t make that happen in the app. Plus, I have so many different design options that I want to offer, that hiding all of them takes extremely long and is a nightmare for organizing stocks etc.

Is there anything that I’m missing? Is there a plugin that will let me do something like this? Or an external api? Or do I need to look somewhere else? I’ve seen applications like this, for example logo design websites and custom postcard creators, so it’s not impossible. Photo editing websites and Polyvore also have systems similar to this.

I just have no idea how I can make this happen! Does anyone have any idea or tips?
I hope I explained my idea clearly, if not please tell me and I’ll try to explain more.

This topic was automatically closed after 70 days. New replies are no longer allowed.