Im about to start a new project which will involve dragging and dropping objects (preferably SVGs) from a toolbox onto a stage and I’m thinking of using Raphael.js to help.
The problem I have is that I’d like the app UI to have a layout created in HTML including scrollable panels including the toolbox. I’d then like the user to be able to component from the toolbox and drag it onto a “stage”.
I think my options are twofold:
1) Create the whole of the UI as SVGs in Raphael. I’m guessing that creating a UI including scrollable panels will be much harder in Raphael than using pure HTML which would give me Flexbox and DIVs with overflow:auto etc.
2) Create the UI in HTML and somehow drag and drop SVG components from the toolbox onto the Raphael stage where I could then allow the user to drop them into place. I’m not sure that this is even possible.
Are my assertions correct? If so, would it be possible to detect when the user mouses over the stage and somehow hide the drag help and recreate the component inside the stage?
I wrote something like this not too long ago. I draw the components in the toolbox as individual Raphael canvasses. When dragged, I move this tool out over the work area. When dropped, I do the calculations to figure out where, then create a new Raphael object in the work area at that position. The dragged object is then put back in the proper position in the toolbox. Does this work for your situation?