YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Drag & Drop: Using the Drag Shim

# Drag & Drop: Using the Drag Shim

This example shows the use of the drag shim when dragging nodes over other troublesome nodes.

View example in new window.

Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the `Shim off` button and drag again. Now you can drag over the iframe.

You can see the shim by clicking the `Debug Off` button.

Drag Me

## Using The Drag Shim

Code for this example.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { //Create the DDProxy Instance var dd = new YAHOO.util.DDProxy('demo', { //Don't resize the frame resizeFrame: false }); //On startDrag let's change the proxy's size and color dd.on('startDragEvent', function() { Dom.setStyle(this.getDragEl(), 'height', '20px'); Dom.setStyle(this.getDragEl(), 'width', '100px'); Dom.setStyle(this.getDragEl(), 'backgroundColor', 'blue'); Dom.setStyle(this.getDragEl(), 'color', 'white'); this.getDragEl().innerHTML = 'Custom Proxy'; }); Event.on('shim', 'click', function(e) { var tar = Event.getTarget(e); var value = tar.value; if (value == 'off' || value == 'Shim Off') { //Turn on the shim dd.useShim = true; tar.value = 'on'; tar.innerHTML = 'Shim On'; Dom.get('debugShim').disabled = false; } else { //Turn off the shim dd.useShim = false; tar.value = 'off'; tar.innerHTML = 'Shim Off'; Dom.get('debugShim').disabled = true; } }); Event.on('debugShim', 'click', function(e) { var tar = Event.getTarget(e); var value = tar.value; if (value == 'off' || value == 'Debug Off') { //Turn on debugging the shim YAHOO.util.DDM._debugShim = true; tar.value = 'on'; tar.innerHTML = 'Debug On'; } else { //Turn off debugging the shim YAHOO.util.DDM._debugShim = false; tar.value = 'off'; tar.innerHTML = 'Debug Off'; } }); }); })();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### 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
- Using Handles
- Dragged Element on Top
- Using a Proxy Element
- Reordering a List
- Using Interaction Groups
- Custom Click Validator
- Staying in a Region
- Using the Drag Shim
- Reorder Rows with Drag and Drop (included with examples for DataTable Control)

### More Drag & Drop Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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