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 YAHOO.util.DD
instance,
making it draggable. The blue square in the lower right corner is positioned
to stay in that corner, so we YAHOO.util.DragDrop
instead
of 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).
Markup:
Code:
Note: Logging and debugging is currently turned off for this example.
Copyright © 2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings