after reading the excellent tutorial by Jonathan Snook, I decided that it was time to try and improve it… First of all, let me say that I in no way wish to put snook article down, I only want to add some things to make it cleaner..

Snook made it easy to see what happens in your javascript, but he added presentation in the behaviour layer(js). And instead of bitching about is, I decided to try and change it myself. Snook made sure that the draggable thingy was transparent, by setting its opacity in the javascript code like this

As I said before, I like to keep my presentation seperate from my behaviour (and structure ofcourse). So I decided to change that to:

//this.el.setOpacity(.5); // snook
this.el.addClassName('dragged'); // wnas added

And to remove the className I changed

//this.el.setOpacity(1); // snook
this.el.removeClassName('dragged'); // wnas added

Ofcourse I added something in the css to let it do something (please note id added in order for the style to take effect)

#dragger.dragged {
opacity: .5; /* firefox */
filter: alpha(opacity=50); /* ie */
}

I hope that my two cents help anyone, to seperate behaviour, structure and presentation.

Here are the files to let you test and improve it for your selfs…

the html page

mooTools