Today’s Ajax Prototype experiment involves draggable objects: Check it out.

A few issues came up during its development.

I couldn’t find a list of observable events (ie “mousedown”, “mouseup”, “mousemove” etc). That took a little trial and error to figure out.

In Internet Explorer when I click in the box to drag it around sometimes the text is highlighted (like you’d see if you were highlighting text to copy it). Not sure how to stop that, other than turning the entire thing into an image. No problems with this on Firefox 3.

Firefox 3 has a feature that when you click down on an object you can drag a semi-transparent copy of it around the page. Not sure the purpose of it — it looks cool, I guess. That was causing problems until I threw in a line to stop the event propagation: Event.stop(event);. In that respect, Internet Explorer came out on top.

Tomorrow I’ll add the ability to save the box’s last position so that when someone new loads the page it is in the same spot that the last person dropped it at.

Two sites that were helpful today:
JavaScript Kit – DOM Element properties
CSS Cursors

Today, the Ajax adventure continues: Arrows with a Counter! (it saves the state in a database)

The logic isn’t terribly complicated, but I stumbled over the syntax writing it up. PHP and JavaScript are syntactically similar which makes debugging difficult, especially since JavaScript fails silently. I resorted to lots of alerts to help me narrow down the failure points. Exciting… I know.

…GMail, here I come.