YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Drag & Drop: Custom Click Validator

# Drag & 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.

View example in new window.

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:

<div id="dd-demo-1" class="dd-demo"><br />DD</div> <div id="dd-demo-2" class="dd-demo">DDTarget</div>

Code:

<script type="text/javascript"> (function() { var dd, dd2, clickRadius = 46, startPos, Event=YAHOO.util.Event, Dom=YAHOO.util.Dom; YAHOO.util.Event.onDOMReady(function() { var el = Dom.get("dd-demo-1"); startPos = Dom.getXY(el); dd = new YAHOO.util.DD(el); // our custom click validator let's us prevent clicks outside // of the circle (but within the element) from initiating a // drag. dd.clickValidator = function(e) { // get the screen rectangle for the element var el = this.getEl(); var region = Dom.getRegion(el); // get the radius of the largest circle that can fit inside // var w = region.right - region.left; // var h = region.bottom - region.top; // var r = Math.round(Math.min(h, w) / 2); //-or- just use a well-known radius var r = clickRadius; // get the location of the click var x1 = Event.getPageX(e), y1 = Event.getPageY(e); // get the center of the circle var x2 = Math.round((region.right+region.left)/2); var y2 = Math.round((region.top+region.bottom)/2); // I don't want text selection even if the click does not // initiate a drag Event.preventDefault(e); // check to see if the click is in the circle return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r ); }; dd.onDragDrop = function(e, id) { // center it in the square Dom.setXY(this.getEl(), Dom.getXY(id)); } dd.onInvalidDrop = function(e) { // return to the start position // Dom.setXY(this.getEl(), startPos); // Animating the move is more intesting new YAHOO.util.Motion( this.id, { points: { to: startPos } }, 0.3, YAHOO.util.Easing.easeOut ).animate(); } dd2 = new YAHOO.util.DDTarget("dd-demo-2"); }); })(); </script>

## 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 © 2009 Yahoo! Inc. All rights reserved.

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