Drag & Drop

Drag and drop used to be a pain in the butt. Scriptaculous has fixed this problem very, very nicely. To make anything within a <div> element be draggable, give the div an id, and then within some JavaScript, pass that id name to the constructor of the Draggable class:

<script>
new Draggable('draggable');
</script>

Here's an example that drags the Yahoo! logo around:

Drag the Yahoo logo around.

You can also drag items onto a target. Try dragging that Yahoo! logo onto the Flickr logo below:

The way to do this, is to make calls to the static add() function in the Droppables class:

<script>
Droppables.add('target', {accept : 'draggable',
   onDrop : function(el){alert('Dropped something on me');}});
</script>

The first argument is the id name of the element that we will be dropping (or dragging) things onto. In this case, I just made up an id for this, called "target". The second argument is the class name of the <div> of the source element, in our example, it was the Yahoo! logo, that had a div class name of "draggable." Note that you don't actually have to have a CSS class for this, you just need a unique name. See the scrip.aculo.us droppables wiki page for further documentation on how to use this.

Effects

Scriptaculous has a nice Effects class that has some static functions for doing all kinds of effects. Basically, you just call Effect.xyz where xyz is the effect you want. Some example effects are:

• SwitchOff()
• Fade()
• Squish()

Using Effects is really, really simple. Just define a div with a JavaScript onclick attribute pointing to the Effect.xyz() function you want to use. For example:

<div onclick="new Effect.SwitchOff(this)">
   Some img or string, or anything you want to fade.
</div>

Here's some example effects for the above mentioned functions: Effect.SwitchOff() :

Effect.Fade() :

Effect.Squish() :

Sliders

Creating sliders involves a lot of <div>'s, but it's still pretty easy to do. This is a slider from scriptaculous. Slide it around.

DOM functions

There are a lot of nifty functions that come with Prototype. Some nice ones are:

• $() - shortcut to document.getElementById()
• $F() - return the value of any form input value, such as text fields and textareas.
• $A() - converts a single argument into a JavaScript Array object.
• $H() - converts a JavaScript object instance into a Hash.

Let's look at the usage of the most popular and most commonly used function: $(). The string below is part of a div with id="hello". Clicking on the button below will do a simple string change that used the $() function, passing it the div id 'hello':

Try.these()

PeriodicalExecuter & Ajax.Updater()

PeriocdicalExecuter will call some function after every some number of seconds. For example, we might have a site that has a weather forcast that can change by the minute. It'd be nice if we could periodically update the weather within the page via Ajax. Well, this function helps us achieve this easily.

This function is particularly nice because it helps us not have to use the window.setTimeout nastiness that JavaScript used to force us into.

In our example here, we'll just make repeated calls to a backend php script passing us back the time:

Here's how we did this:

  function updateTimeFunc(){
    new Ajax.Updater('updater_div', '/proto_ajax.php'); 
  }

  function updateTime(){
     var e = new PeriodicalExecuter(updateTimeFunc, 3);
  }

updateTime() was just a small function you might not need - we used it for the callback when the "test Ajax.Updater" button was clicked. What it does though, is instantiate a PeriodicalExecuter, passing it the name of the function to execute periodically ('updateTimeFunc'), and the interval for executing this function (3 seconds in this case).

Within the function that is called periodically, we just use another nifty tool: Ajax.Updater(). This class basically updates some div id, with the html returned to us from some page. In our example, we were updating the div named 'updater_div' with the html returned from the page at '/proto_ajax.php'.

Native class extensions

Prototype has extensions for many native JS types, such as Number and String. Let's test the String.camelize() function: