YUI Library Examples: Drag & Drop: Drag and Drop - Resizable Panel

Drag & Drop: Drag and Drop - Resizable Panel

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.)

Basic Drag and Drop

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).



Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings