YUI Library Examples: Drag & Drop: Drag and Drop Handles

Drag & Drop: Drag and Drop Handles

This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.

H1
H2
H
Outer

Basic Drag and Drop

The YUI Drag and Drop Utility lets you make HTML elements draggable.

For this example, we will enable drag and drop for the three <div> elements.

Create the demo elements:

Now we instantiate three YAHOO.util.DD instances. By default, a mousedown on any part of source element would start a drag operation. We use setHandleElId to make it so that only a specific area or areas of the source element will start a drag when clicked.

Elements that are not a child of the source element can be used as drag handles by using setOuterHandleElId.

Copyright © 2008 Yahoo! Inc. All rights reserved.

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