YUI Library JavaScript DHTML


            



    
Staying in a Region

/*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;
    text-align: center;
    color: #fff;
    cursor: move;
    height: 60px;
    width: 60px;
    padding: 0;
    margin: 0;
}
.dd-demo div {
    border: 1px solid black;
    height: 58px;
    width: 58px;
}
#dd-demo-canvas1 {
    padding: 55px;
    background-color: #7E5B60;
    border: 1px solid black;
}
#dd-demo-canvas2 {
    padding: 25px;
    background-color: #566F4E;
    border: 1px solid black;
}
#dd-demo-canvas3 {
    padding: 15px;
    background-color: #6D739A;
    border: 1px solid black;
}
#dd-demo-1 { 
    background-color:#6D739A;top:5px; left:5px;
}
#dd-demo-2 { 
    background-color:#566F4E;top:50px; left:100px;
}
#dd-demo-3 {
    background-color:#7E5B60;top:-100px; left:200px;
}




Staying in a Region


  This example shows how to keep draggable elements from being dragged out of a region.

The three elements below will not be able to be dragged beyond the borders of their own colored elements.


            3

        
    


(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        dd1, dd2, dd3;
    YAHOO.example.DDRegion = function(id, sGroup, config) {
        this.cont = config.cont;
        YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
    };
    YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
        cont: null,
        init: function() {
            //Call the parent's init method
            YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
            this.initConstraints();
            Event.on(window, 'resize', function() {
                this.initConstraints();
            }, this, true);
        },
        initConstraints: function() {
            //Get the top, right, bottom and left positions
            var region = Dom.getRegion(this.cont);
            //Get the element we are working on
            var el = this.getEl();
            //Get the xy position of it
            var xy = Dom.getXY(el);
            //Get the width and height
            var width = parseInt(Dom.getStyle(el, 'width'), 10);
            var height = parseInt(Dom.getStyle(el, 'height'), 10);
            //Set left to x minus left
            var left = xy[0] - region.left;
            //Set right to right minus x minus width
            var right = region.right - xy[0] - width;
            //Set top to y minus top
            var top = xy[1] - region.top;
            //Set bottom to bottom minus y minus height
            var bottom = region.bottom - xy[1] - height;
            //Set the constraints based on the above calculations
            this.setXConstraint(left, right);
            this.setYConstraint(top, bottom);
        }
    });
    Event.onDOMReady(function() {
        dd1 = new YAHOO.example.DDRegion('dd-demo-1', '', { cont: 'dd-demo-canvas3' });
        dd2 = new YAHOO.example.DDRegion('dd-demo-2', '', { cont: 'dd-demo-canvas2' }) ;
        dd3 = new YAHOO.example.DDRegion('dd-demo-3', '', { cont: 'dd-demo-canvas1' });
    });
})();





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