October 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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

  • April 12, 2007
  • 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>
<script type="text/javascript" src="../../build/event/event.js" >
</script>
<script type="text/javascript" src="../../build/dom/dom.js">
</script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js">
</script>

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



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel