Rich Waters

Update 4/8/06 - Theres a new article available that dives into writing a custom Draggable Class.

Update 3/7/06 - looks like this is my most popular article and I noticed there’s no direct link to the sample javascript, so here you go. rich.js

For those of you who haven’t seen OpenRico its another AJAX library, with quite a few cool extras. What I’m going to cover here is my first expiriment with Rico and their ‘drag and drop’ functionality. Getting basic drag and drop functionality is extremely easy with this library, and with just a bit of modification you can easily make it fit whatever you could want.

First things first, to use Rico you need to get it: Download Open Rico and Prototype (if you haven’t seen protyotype before definitely check it out, OO Javascript at its best). Rico is a rather large library for just an everyday site so before deploying anything with it I would reccomend cutting out anything your not using and running it through a JS Compressor.

Import the libraries just like any other javascript, find or create a couple of div’s within your html to act as the draggable and the drop targets. Now add an onLoad javascript call (or put it elsewhere, perhaps an onclick if you want someone to activate the drag and drop feature) to

dndMgr.registerDropZone( new Dropzone( ‘your html div’ ) );

dndMgr is an object that Rico creates for you to make creating drag and drop objects easy. With the single line above the specified div becomes a drop target for the draggable objects. Now with one more call, a different div can become a draggable object to be dropped on the first.

dndMgr.registerDraggable( new Draggable(’test-rico-dnd’,'your html div2′) );

Again calling a method of the built in dndMgr object to register a div as a draggable object. Same as before this can be called onLoad, onClick, or in the middle of any other javascript function so you can make it draggable at any point you choose.

To make something happen when an object gets dragged onto a target you need to go a bit more in depth (this is where learnig prototype will come in handy). You need to create your own draggable and Dropzone classes that extend the basic ones provided in Rico. If you look through the Rico classes you’ll notice methods which correspond to the different events that take place, clicking on a draggable object, dragging a draggable object, hovering over a drop target, releasing on a non-drop target, releasing on a drop target, and quite a few more. To create your own functionality override the method in your custom class and add the functionality that you want. Probably the most useful function to override is the Dropzone.accept function, you can use this.htmlElement to access the dropZone and draggableObjects[0].htmlElement to access the first draggable element being dropped on the target.

Here’s a toned down version of what I wrote for work: RouteExample

This page has custom drag and drop objects written to change the effects some, the trash can is the drop target and draggable objects are created on the fly when you press the submit button. Basically we’re allowing the user to create a list of options, if they mess up all they need to is drag the mistake on the trash can (something most people are familiar with due to windows).

This entry was posted on Saturday, December 3rd, 2005 at 1:22 pm and is filed under Drag 'n Drop, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

- Heavily moderated, SPAM will be dealt with.