YUI Library JavaScript DHTML


            



    
Using a Proxy Element

/*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:60px;
    width:60px;
}
.dd-demo-em {
    border:4px solid purple;
}
#dd-demo-1 { 
    background-color:#6D739A;top:0px; left:0px;
}
#dd-demo-2 { 
    background-color:#566F4E;top:50px; left:100px; height: 80px; width: 80px;
}
#dd-demo-3 {
    background-color:#7E5B60;top:-150px; left:200px; height: 100px; width: 100px;
}
#dd-demo-3-proxy {
    position: absolute; 
    visibility: hidden; 
    color: #fff;
    text-align:center;
    background-color:#000; 
    height:100px; 
    width: 100px;
}




Using a Proxy Element


  This example demonstrates drag and drop using a proxy element.



Custom

    (function() {
        var dd, dd2, dd3;
        YAHOO.util.Event.onDOMReady(function() {
            // The first two instances will share a proxy
            // element, created automatically by the utility.
            // This element will be resized at drag time so
            // that it matches the size of the source element.
            // It is configured by default to have a 2 pixel
            // grey border.
            dd = new YAHOO.util.DDProxy("dd-demo-1");
            dd2 = new YAHOO.util.DDProxy("dd-demo-2");
            // The third instance has a dedicated custom proxy
            dd3 = new YAHOO.util.DDProxy("dd-demo-3", "default", { 
                    // Define a custom proxy element.  It will be
                    // created if not already on the page.
                    dragElId: "dd-demo-3-proxy", 
                    // When a drag starts, the proxy is normally
                    // resized.  Turn this off so we can keep a
                    // fixed sized proxy.
                    resizeFrame: false
                });
        });
    })();





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