Drag and Drop Click Validator for Circular Icons

Quoting from the YUI website: "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."

Try dragging the CD icons onto the empty targets:


DD
DDTarget

DD
DDTarget

DD
DDTarget

DD
DDTarget

While I can imagine a design where the drag and drop items are circular, it's not likely that you would want to exclude the rectangular area around the circle. Maybe, but not likely. Here, I have also put a mouse event on the icons, that adds a list item to a text area, just to show that it can be done.

To see the original example click here.