August 14, 2020
Hot Topics:

What Can the Yahoo! User Interface (YUI) Library Do for Your Site?

  • By Vlad Kofman
  • Send Email »
  • More Articles »

Drag and Resize with YUI

As you have noticed, the amount of code that is required to achieve powerful things with YUI is not that large, and this is true for widgets, effects, and utilities as well. For instance, the total fade to white effect can be done with this code:

init = function() {
   var anim = new YAHOO.util.Anim(id, { opacity: { to: 0 } },
                                        1, YAHOO.util.Easing.easeOut);
   YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
YAHOO.util.Event.onAvailable('id', init);

where id is the ID of the element you want to fade as soon as page loads and it is available. The drag effect can be created by calling one line, new YAHOO.util.DD("id"), where id is also the element you want to make draggable.

Say that, besides being able to drag an element across the screen, you also want to make it resizable. This does require a little extra work, but as you will see, the YUI helps a lot. Here is a simple DIV element with a small blue icon in the lower right corner.

The DIV does not look very special, but it features two powerful concepts: drag and resize. (The actual demo is part of the source code.) Clicking and holding the mouse on the gray rectangle will move the DIV and clicking and holding over the blue corner will resize it. Here is the code needed to implement Drag and Resize logic.

Includes for the required JS files:

<script type="text/javascript" src="../../build/yahoo/yahoo.js" >
<script type="text/javascript" src="../../build/event/event.js" >
<script type="text/javascript" src="../../build/dom/dom.js">
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js">

The HTML code is trivial, and just defines the two DIVs: the outer panelDiv and inner blue handlerDiv

The JavaScript code looks a little confusing, but is actually plain JavaScript with JSON type definitions of objects and some logic to calculate size of the outer panelDiv relative to the handleDiv (on the mouse drag of handleDiv).

The DDResize object (note that functions are objects in JavaScript) is defined, and set to extend from the YAHOO.util.DragDrop

YAHOO.extend(DDResize, YAHOO.util.DragDrop);

The default Drag and Drop behavior from the parent objects—prototype.onMouseDown and prototype.onDrag—is overwritten with custom logic, to change the outer panelDiv size as the inner handleDiv is moved.

A new window onload listener is also defined to invoke the drag and resize behavior on assigned DIV elements:

YAHOO.util.Event.addListener(window, "load", DDApp.init);

And, the new behaviors are assigned with the callback object DDApp, which initializes DDResize, and also initializes the default YUI YAHOO.util.DD object.

new DDResize("panelDiv", "handleDiv");
new YAHOO.util.DD("panelDiv");

Page 2 of 3

This article was originally published on April 12, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date