Yahoo! Developer Network Home - Help

YDN Site Search

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

View example in new window.

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

Markup:

<div id="dd-panel"> <div id="dd-resize-handle"></div> </div>

Code:

<script type="text/javascript"> YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) { YAHOO.example.DDResize.superclass.constructor.call(this, panelElId, sGroup, config); if (handleElId) { this.setHandleElId(handleElId); } }; YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, { onMouseDown: function(e) { var panel = this.getEl(); this.startWidth = panel.offsetWidth; this.startHeight = panel.offsetHeight; this.startPos = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)]; }, onDrag: function(e) { var newPos = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)]; var offsetX = newPos[0] - this.startPos[0]; var offsetY = newPos[1] - this.startPos[1]; var newWidth = Math.max(this.startWidth + offsetX, 10); var newHeight = Math.max(this.startHeight + offsetY, 10); var panel = this.getEl(); panel.style.width = newWidth + "px"; panel.style.height = newHeight + "px"; } }); (function() { var dd, dd2, dd3; YAHOO.util.Event.onDOMReady(function() { // put the resize handle and panel drag and drop instances into different // groups, because we don't want drag and drop interaction events between // the two of them. dd = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize"); dd2 = new YAHOO.util.DD("dd-panel", "paneldrag"); // addInvalidHandleid will make it so a mousedown on the resize handle will // not start a drag on the panel instance. dd2.addInvalidHandleId("dd-resize-handle"); }); })(); </script>

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Drag & Drop Examples:

- Basic Drag and Drop
- Drag and Drop Handles
- Drag and Drop with the Dragged Element on Top
- Drag and Drop using a Proxy Element
- Using Drag and Drop to Reorder a List
- Drag and Drop Interaction Groups
- Drag and Drop - Resizable Panel
- Drag and Drop - Custom Click Validator
- Drag and Drop - Staying in a Region

### More Drag & Drop Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

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