This example demonstrates one way to implement a resizable panel using the Drag & Drop Utility. (Note: The Container Family of UI controls contains a Panel Resize Example that also provides useful code for building resizable panels.)
The Drag & Drop Utility lets you make HTML elements draggable.
For this example, the large grey square will be
making it draggable. The blue square in the lower right corner is positioned
to stay in that corner, so we
YAHOO.util.DD to implement the resize handle. This is because
we only want to track the coordinates of the drag operation to resize the panel.
We don't want to reposition the resize handle (it will reposition itself as we
resize the panel).
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.