YUI Library JavaScript DHTML


            



    
Dragged Element on Top

/*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;
}
#dd-demo-3 {
    background-color:#7E5B60;top:-150px; left:200px;
}




Dragged Element on Top


  This example builds on the basic drag and drop, keeping the dragged element
on top of the others by changing its z-index property during the drag.




// Our custom drag and drop implementation, extending YAHOO.util.DD
YAHOO.example.DDOnTop = function(id, sGroup, config) {
    YAHOO.example.DDOnTop.superclass.constructor.apply(this, arguments);
};
YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD, {
    origZ: 0,
    startDrag: function(x, y) {
        YAHOO.log(this.id + " startDrag", "info", "example");
        var style = this.getEl().style;
        // store the original z-index
        this.origZ = style.zIndex;
        // The z-index needs to be set very high so the element will indeed be on top
        style.zIndex = 999;
    },
    endDrag: function(e) {
        YAHOO.log(this.id + " endDrag", "info", "example");
        // restore the original z-index
        this.getEl().style.zIndex = this.origZ;
    }
});


(function() {
    var dd, dd2, dd3;
    YAHOO.util.Event.onDOMReady(function() {
        dd = new YAHOO.example.DDOnTop("dd-demo-1");
        dd2 = new YAHOO.example.DDOnTop("dd-demo-2");
        dd3 = new YAHOO.example.DDOnTop("dd-demo-3");
    });
})();





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