YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Implement a custom click validator to make a circular drag and drop implementation




    
Custom Click Validator

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}







.dd-demo {
    position:relative;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:100px;
    width:100px;
}
#dd-demo-1 { 
    background:url(yui_2.7.0b-assets/dragdrop-assets/circle.gif) 0 0 no-repeat;
    border:0px solid black;
    z-index:10;
    cursor:default;
}
#dd-demo-2 { 
    background:#A0B9A6;
    top:10px; left:180px;
    border:0px solid black;
    cursor:default;
}




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


    (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");
        });
    })();





   
  
yui_2.7.0b.zip( 4,431 k)