Rico Drag n’Drop p2: Rico.Draggable

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.

Posted in Drag 'n Drop, Javascript
8 comments on “Rico Drag n’Drop p2: Rico.Draggable
  1. CJ says:

    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!

  2. Jeremie says:

    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!

  3. luk says:

    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?

  4. Rich Waters says:

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

  5. luk says:

    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.

  6. 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.”

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

14 Pings/Trackbacks for "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. [...]

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

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

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

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

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

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

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

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

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

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

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

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

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