Dialog is not draggable because of draggable background?

Question

In my project I've a draggable page and on top of it I've popped a dialog and made it draggable. But somehow the dialog is not dragging. I dont know why it is happening. dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable? Please do Help

This is dialog code:

$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
        .dialog({
            autoOpen: false,
            title: 'Browse & Select',
            maxWidth:1000,
            maxHeight: 600,
            width: 800,
            height: 600,
            dialogClass: "alertDialog", 
            modal: true,
            closeOnEscape: true,
            canMaximize:true,
            draggable: true,
            resizeHt: 0,
            resizeWd: 0,
            resizeStop: function(event, ui) {  
            if (resizeHt== 0 && resizeWd== 0) {
                resizeHt = $dlgLibrary.dialog( "option", "height" );
                resizeWd = $dlgLibrary.dialog( "option", "width" );
            };
            $('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
            resizeHt= 0;
            resizeWd= 0;
        },
        open: function(event, ui) {
        }
         $.ajax({ url: './Library.html', 
            success : function(data) { 
        },
         buttons: libButtons,
         close: function() {
        });