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
[...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]
LotusNotesTutorial
May 14th, 2010
I do not even know the way I stopped up right here, but I thought this submit used to be great. I don’t recognise who you might be however certainly you are going to a famous blogger if you happen to aren’t already
Cheers!
BG mail
October 9th, 2011
Gebo866@yahoo.com
grammar check online
October 16th, 2011
A person essentially lend a hand to make severely posts I would state. This is the first time I frequented your website page and up to now? I amazed with the analysis you made to make this actual post incredible. Wonderful task!
online degrees
October 25th, 2011
I think other web-site proprietors should take this site as an model, very clean and wonderful user friendly style and design, let alone the content. You’re an expert in this topic!
google backwards
October 30th, 2011
This website is known as a walk-through for the entire info you wished about this and didn’t know who to ask. Glimpse right here, and you’ll definitely uncover it. piumini prezzi
monclaire prezzi
November 1st, 2011
Thanks for your write-up. One other thing is that individual states have their particular laws that affect house owners, which makes it quite hard for the the legislature to come up with a new set of recommendations concerning property foreclosure on house owners. The problem is that a state has own regulations which may have impact in an unwanted manner on the subject of foreclosure plans.
burberry
November 2nd, 2011
You made some first rate points there. I seemed on the internet for the difficulty and located most individuals will go along with with your website.
pianoforte
November 6th, 2011
Can I just say what a reduction to find somebody who really is aware of what theyre talking about on the internet. You positively know how to carry an issue to gentle and make it important. More people must read this and perceive this aspect of the story. I cant imagine youre not more fashionable because you undoubtedly have the gift.
arcopedico
November 29th, 2011
I am glad that I detected this website, just the right information that I was looking for!
plumbers
December 2nd, 2011
Just want to say your article is as tonishing. The lucidity in your post is simply spectacular and i can assume you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with forthcoming post. Thanks a million and please keep up the ac complished work.
Maurice Pangrazio
December 3rd, 2011
What i don’t realize is in reality how you are no longer actually a lot more well-liked than you may be right now. You’re very intelligent. You know therefore considerably in the case of this subject, produced me for my part imagine it from a lot of numerous angles. Its like men and women are not interested except it is something to accomplish with Girl gaga! Your personal stuffs great. Always maintain it up!
bestselling books
December 4th, 2011
Thanks for the something totally new you have disclosed in your article. One thing I would like to touch upon is that FSBO connections are built after a while. By introducing yourself to the owners the first weekend their FSBO is actually announced, prior to masses commence calling on Wednesday, you develop a good connection. By sending them equipment, educational materials, free accounts, and forms, you become an ally. By subtracting a personal fascination with them and their circumstances, you develop a solid interconnection that, on many occasions, pays off as soon as the owners opt with an agent they know plus trust — preferably you actually.
Sarita Kirchoff
December 7th, 2011
It is truly a great and helpful piece of info. I’m happy that you just shared this useful info with us. Please keep us informed like this. Thanks for sharing.
Body Mass Index Calculator
December 8th, 2011
Youre so cool! I dont suppose Ive read something like this before. So good to seek out any individual with some unique ideas on this subject. realy thanks for starting this up. this website is one thing that is wanted on the internet, someone with a bit originality. helpful job for bringing something new to the internet!
iberbanda
December 11th, 2011
I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It¡¯s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the web will be much more useful than ever before.
Karoline Carpentieri
December 17th, 2011
I have to get across my love for your generosity in support of individuals that require guidance on this important question. Your special dedication to passing the message around became exceedingly important and have surely helped guys and women just like me to reach their goals. This helpful guideline indicates this much a person like me and even more to my fellow workers. Thank you; from each one of us.
Search Engine
December 17th, 2011
hello!,I really like your writing very a lot! proportion we keep up a correspondence more about your post on AOL? I need an expert on this area to unravel my problem. Maybe that’s you! Taking a look ahead to look you.
mini plug plants
December 21st, 2011
You made some respectable points there. I searched on the internet for the issue and found most people will associate with together with your website.
window tint york pa
December 28th, 2011
Once I originally commented I clicked the -Notify me when new comments are added- checkbox and now every time a remark is added I get four emails with the identical comment. Is there any manner you can remove me from that service? Thanks!
lawn care middletown de
December 28th, 2011
You will find some validity nevertheless i requires hold opinion until I think about it further. Good article , thanks and now we want more! Included to FeedBu
cheap louis vuitton purses
January 4th, 2012
Very interesting subject , thanks for posting . “Nobody outside of a baby carriage or a judge’s chamber believes in an unprejudiced point of view.” by Lillian Hellman.
Harold Nayman
January 13th, 2012
There may be a bundle to learn about this. You made nice points also.
dc accountant
January 16th, 2012
After studying just a few of the weblog posts on your website now, and I really like your means of blogging. I bookmarked it to my bookmark web site list and will likely be checking again soon. Pls take a look at my web page as properly and let me know what you think.
lancaster outlets
January 16th, 2012