YUI Library Examples: Drag & Drop: Drag and Drop - Custom Click Validator

Drag & Drop: Drag and Drop - Custom Click Validator

This example demonstrates how to implement a custom click validator to make a circular drag and drop implementation. Because all DOM elements that have dimensions are rectangular, the way to implement a circular drag object is to perform calculations on mousedown to determine whether the mouse was targeting a valid portion of the element (eg, a portion within the circle).

The same method could be used to create any non-rectangular draggable object.


DD
DDTarget

Basic Drag and Drop

The Drag & Drop Utility lets you make HTML elements draggable.

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

Markup:

Code:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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