After the overwhelming popularity of my short little blurb on Drag & Drop using Rico, I’ve decided to write up a couple more articles stepping through the code used in the original example. You can take a look at the original article here. There I covered the simplest way to get started, though thats not what the example used. The example makes some changes by creating custom draggable and dropable classes.
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
- Heavily moderated, SPAM will be dealt with.
[...] Update 4/8/06 – Theres a new article available that dives into writing a custom Draggable Class. [...]
Rich Waters » Blog Archive » Fun with Drag and Drop w/RICO
April 19th, 2006
On this page: http://www.wideopenwest.com/~neflar/blog/2005/12/fun-with-drag-and-drop-wrico.html
your link to this page is broken. I think you just forgot the /blog directory in the link. Excellent writeup, thanks!
CJ
May 1st, 2006
Hi,
I’m trying to do some dnd in my website. I’m working with asp.net so I tried to do it with Atlas.
But this is too restrictive and I now want to code my own javascripts or to use Rico.
Do you think I can use Rico in asp.net pages?
Great example, thanks!
Jeremie
June 1st, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Top 126 Ajax Tutorials : Ultimate Web Developer Lists : eConsultant
July 5th, 2006
hi
thanks for the site, was already a great help. however, has anyone a clue why all these drag and drop example, including those on openrico homepage do only work with firefox or mozilla (and might even depend on version) and why they do not run under safari?
i get always a null-value error on line 2644 in rico.js, however, i do not completly understand why.
any idea?
luk
September 12th, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
All Cusco | Blog » Blog Archive » Top - 126 tutoriales Ajax
October 2nd, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
TechnoRepublic » Blog Archive » Top 126 AJAX Tutorial
October 7th, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Good AJAX Tutorials at A.JAX
October 15th, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
H.G.M. Blog » Blog Archive » Helpful tutorials to learn Ajax.
October 24th, 2006
@luk – Sorry, must have missed your comment from a while back. I’m sorry I’m not quite sure why it doesn’t work in Safari, unfortunately I don’t have a mac around to even try it out to look at debugging things. I’m looking into getting one next year, but not sure how that will pan out.
Rich Waters
December 8th, 2006
thanks for the reply.
my bad, i have (shortly after i pasted my comment) found on the openrico page itself a comment that DnD is not supported by safari at the moment. i guess i was simply confused since it seemed to work sometimes, yet, it threw an error in the debugging console and the behaviour in safari had some oddities. i simply switched completely over to firefox and hope they will support safari sometimes officially in the future.
luk
December 13th, 2006
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Ajax Plugins » Blog Archive » Top 126 Ajax Tutorials
February 17th, 2007
test
Mexxnt
April 18th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Ajax Tutorials | Việt Nam SEO - Quang ba website
May 16th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Extreme Unix! » Ajax tutorials
May 25th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Tutorials » Blog Archive » 146 Ajax Tutorials
June 11th, 2007
This one makes sence “One’s first step in wisdom is to kuesstion everything – and one’s last is to come to terms with everything.”
Vaughn Guderjahn
June 14th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Bleebot | Christophe Lefevre » + de 140 tutos Ajax
June 22nd, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
sastgroup.com » Blog Archive » Tutorials su ajax
July 9th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Il blog sul php » Tutorials su ajax
July 14th, 2007
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
Smashing Coding » Plus de 140 tutos et scripts Ajax pour les webdevs
November 23rd, 2007