Rich Waters

Ext, Javascript, Notes/Domino, Ext.nd, Ruby on Rails

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.

Share and Enjoy:
  • Digg
  • Facebook
  • Google Bookmarks
  • Posterous
  • RSS
  • Twitter
U Comment, I Follow - Heavily moderated, SPAM will be dealt with.

45 Responses to “Rico Drag n’Drop p2: Rico.Draggable”

  1. [...] 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

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

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

  4. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Top 126 Ajax Tutorials : Ultimate Web Developer Lists : eConsultant

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

  6. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    All Cusco | Blog » Blog Archive » Top - 126 tutoriales Ajax

  7. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    TechnoRepublic » Blog Archive » Top 126 AJAX Tutorial

  8. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Good AJAX Tutorials at A.JAX

  9. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    H.G.M. Blog » Blog Archive » Helpful tutorials to learn Ajax.

  10. @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

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

  12. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Ajax Plugins » Blog Archive » Top 126 Ajax Tutorials

  13. test

    Mexxnt

  14. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Ajax Tutorials | Việt Nam SEO - Quang ba website

  15. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Extreme Unix! » Ajax tutorials

  16. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Tutorials » Blog Archive » 146 Ajax Tutorials

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

  18. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    Bleebot | Christophe Lefevre » + de 140 tutos Ajax

  19. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details    [...]

    sastgroup.com » Blog Archive » Tutorials su ajax

  20. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details    [...]

    Il blog sul php » Tutorials su ajax

  21. [...] 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

  22. [...] Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details [...]

    LotusNotesTutorial

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

  24. grammar check online

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

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

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

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

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

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

  31. I am glad that I detected this website, just the right information that I was looking for!

    plumbers

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

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

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

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

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

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

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

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

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

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

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

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

  44. There may be a bundle to learn about this. You made nice points also.

    dc accountant

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

Leave a Reply