Yahoo YUI Subscribe to drag drop events
December 11th, 2006
I’ve been playing with the Yahoo! UI (YUI) Javascript Library recently, it contains all the useful utilities you would expect from a JavaScript library, as well as some more gratuitous features.
While I can’t honestly say I have spent the time to compare Yahoo’s efforts to those of others, such as prototype or script.aculo.us, I have taken a liking to the way the Yahoo library feels… even if it’s just their coding style just feels a little funky.
One of the staple favourites of the library, is the Drag-Drop collection. The boss (and the client) always likes it when they can drag things around their web applications, especially when it’s not just pointless eye candy. After playing with the scripts for a while, I got the feeling that something was missing. It turned out to be the ability to subscribe to drag drop events. The general way Yahoo deals with the “event” handlers for the dragged or dropped items is by overriding functions that are called. This works quiet well for most things, but seeing as another important part of the library is event handling, including custom events, it seems a shame to let it go to waste and not allow events to be fired and subscribed to by the Drag-Drop classes.
With that in mind, and borrowing some concepts from an inspiring article I wrote a simple extension to the YAHOO.util.DD class that creates custom events that can be subscribed to by any number of listeners.
There were some issues with the apparent inconsistency of the arguments being passed between functions, but I normalised it as best I could and can up with this:
/**
* @extends YAHOO.util.DD
* @constructor
* @param {String} ElId the id of the element that will cause the resize
* @param {String} sGroup the group of related DragDrop items
* @param {Array} config the arbitrary configuration array
*/
YAHOO.Gnosis.DD = function(ElId, sGroup, config)
{
if (ElId)
{
this.init(ElId, sGroup, config);
}
}
YAHOO.extend(YAHOO.Gnosis.DD, YAHOO.util.DD,
{
onStart: new YAHOO.util.CustomEvent('onStart event'),
startDrag: function(x,y,z)
{
this.onStart.fire(x,y);
},
onComplete: new YAHOO.util.CustomEvent('onComplete event'),
endDrag: function(event)
{
this.onComplete.fire(event.clientX, event.clientY, event.target);
},
duringDrag: new YAHOO.util.CustomEvent('duringDrag event'),
onDrag: function(event)
{
this.duringDrag.fire(event.clientX, event.clientY, event.target);
}
});
(Gnosis is the framework, a collection of PHP and Javascript I am putting together as a basis for my development projects.)
It seems so obvious now. I’ve put together a basic example to show how this can be used.
This is only a start, there are plenty of other events that are worth overriding in this manner, for example the onDragEnter, onDragOut, onDragDrop, onDragOver, onMouseUp and onMouseDown functions (and a few more). That’s another thing I like about the YUI, it’s designed to be extended.
