To start things off, you need to create your own class extending the built in Rico.Draggable class

var MyDraggable = Class.create();
MyDraggable.prototype = (new Rico.Draggable()).extend( {

}

While not seeming like much, this actually copies all the methods and functionality from the Rico.Draggable class into the MyDraggable class. You can override any of these methods to change this functionality. The first one to take a look at is the getSingleObjectDragGUI method. By default this method just returns ‘this.htmlElement’ and is used by other objects and methods to get a handle on the object you want to pick up(drag). A few minor changes can make things much more aesthetically pleasing.

getSingleObjectDragGUI: function() {
new Effect.FadeTo( this.htmlElement,.2,250,10 );
var div = document.createElement("div");
div.id = "fakeitem";
div.className = 'item dragging';
new Insertion.Top( div, this.htmlElement.innerHTML );
return div;
},

Breaking that down, The first line uses Rico’s Effect object to fade the current div to 20% opacity. On the next line we create a new div element, then assign an id and a couple class names to it (Not required, but nice if you want to apply any styling to it), then use Prototype’s Insertion to place it onto the page while copying the original divs innerHTML into the new one. The last line returns a refrence to the newly created div instead of the original div. This may seem a bit confusing, but the end result is that when you pick up the main div you get a copy. The original div stays in place, but gets faded so you can tell the difference.

cancelDrag: function() {
new Effect.FadeTo( this.htmlElement,1,100,10 );
},

The cancelDrag method is called when the div being dragged is dropped anywhere but a drop target. We call the Rico Effect object again and fade the original element back to 100% opacity.
What happens to our “fakeitem” you ask?
Good question, it just so happens that the built in _doCancelDragProcessing that gets called checks to see if the div has a parentNode, if it does not then the element is removed.

select: function() {
}

Override ’select’ with an empty method? this just stops the defualt selection highlighting.

There are several other methods that you can override to change the look or functionality at different stages. Methods are: initialize, getMouseDownHTMLElement, select, deselect, isSelected, startDrag, cancelDrag, endDrag, getSingleObjectDragGUI, getMultiObjectDragGUI, getDroppedGUI.

• The original example: RouteExample
• The original Javascript: rich.js
• First Aricle: Fun with drag and drop w/rico

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).