Printable View
Take a look at sites like Zazzle - http://www.zazzle.com/cr/design/pt-mousepad. Business card companies have them too.
You can lay out elements on a screen and upload images to make a custom product.
I am interested in creating an application like this. Is there a way I can do it with relative ease? Will it require thousands of programming hours, or is there an app or prebuilt script out there I can use to create similar applications? I am very interested in doing this.
Thanks,
Multimediocrity
This is pretty advanced, so it depends on your level. Something like this will likely involve something server-side (e.g. PHP) too to store the product, cookie, etc.
You're likely to get replies on here if you ask something specific or at least show you've put the effort in to start. People very rarely hand you ready-made examples on a plate. Just a tip :)
I'm proficient. I can handle coding. Give me a long time and I could make one of these... but it would take me a long time.
How about just adding images and text? Would this be possible? The user should be able to move the position of the text and uploaded images. No saving necessary.
Yeah, no reason that couldn't work, it's just a question of how you code the drag functionality. Personally I'd write a **** load of events to listen for mousedown and mouseup, see where it landed, etc. But if you want to ensure items don't overlap, etc etc, JQuery is far better at this sort of thing.
How's your events?
No events yet. I haven't started. I want to make sure I can handle this before I take on such a project.
I would strongly suggest reading up on events, then.
A few weeks ago I was in a similar position; I needed to build a sort of iGoogle thing, with moving panels and the like. I learned a lot about event handling, in different browsers, etc.
You would set up your events to listen for onmousedowns on the various objects that you want to be draggable. When it spots an omousedown on one those objects, the object's style.left and style.top are modified to move with the mouse (using a mouse position detection script). Equally, when onmouseup is detected, the object stops snapping to the mouse and stays where you left it.
Yes, I understand. I did a similar thing a couple years ago.
Any example scripts or prebuilt apps to get this started?
Sure - I'll dig them out in the morning and post back. 1am nearly here, work in the morning, bed calls ))
Wow, thanks!
Sorry this is later than I said. I've just written the attached file. It's heavily commented. See how you get on. Its principles are this:
1) tell the doc to listen for mouse events. the mouse position is constantly tracked as the mouse moves.
2) when a mousedown is detected, find out if it was on an element that we allow to be dragged and dropped (these elements have the classname 'draggable' - see bottom)
3) if it's a draggable element, start the drag procedure: we're tracking the mouse position anyway, so just set the top and left properties of the dragged element equal to those of the mouse position, so it looks like it's being dragged.
4) when mouseup is detected, stop dragging
Buzz me if you have questions.
Thanks!!
