Ajax Prototype Lab: Draggable Objects

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

2 thoughts on “Ajax Prototype Lab: Draggable Objects

  1. Hey Matt,

    Just to clarify something for you, Ajax is something that utilizes both front-end javascript and backend coding to create unique and usually dynamic data on a webpage. It can be used to not only post data, but gather it as well. If you want I could write a tutorial for your site if you’re interested. It’s actually really simple using a Javascript framework.

    What you’re doing here is more of just Dynamic HTML (manipulating DOM elements with javascript), and I noticed from the source you’re using prototype. You might want to check out jQuery (http://www.jquery.org) I use it and its much more lightweight, easier to use, and has better documentation in my opinion.

    Not trying to rag on you, and glad you’re learning. Just adding something to it.

    Keep it up!

  2. Yo John — you’re absolutely right. “Ajax Lab” is a bit of a misnomer since I’m not actually doing anything with Ajax. Yesterday’s counter example uses Prototype’s Ajax functionality and so will tomorrow’s.

    As for jQuery, that’s definitely something I could look at in the future. I need to play with Prototype a bit first so that when I do try jQuery I can appreciate it for what it is. Kind of like my job ;)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s