showing a drop area when file is draged on the browser

See more:

Javascript

jQuery

HTML5

i want to show the drop are when file is dragged on the browser and all the element should not allow the file to be dropped except the div with 'uloader' class on it , i think my problem is drop area display on dragenter but disappears , i think child drag events are called , i cant figure how to solve this issue

here is the code

<div class="container">
<div class="overlay">
<div class="uloader" >
<div >
Drop Files Here
</div>
</div>
<div class="loader" >
<div>
Some Contents
</div>
</div>
</div>
</div>

and here is js code

$(function () {
     $(document).bind({
                            dragenter: function (e) {
                                $(".loader").css('display', 'none');
                                e.stopPropagation();
                                e.preventDefault();
                                var dt = e.originalEvent.dataTransfer;
                                dt.effectAllowed = dt.dropEffect = 'none';
                            },
                            dragover: function (e) {                                
                                e.stopPropagation();
                                e.preventDefault();
                                var dt = e.originalEvent.dataTransfer;
                                dt.effectAllowed = dt.dropEffect = 'none';
                            },
                              dragleave: function (e) {
                                              $(".loader").css('display', 'block');                                              
                                                e.stopPropagation();
                                                e.preventDefault();
                                                var dt = e.originalEvent.dataTransfer;
                                                dt.effectAllowed = dt.dropEffect = 'none';
												
                                           }

                        });
						
				$('.uloader').bind({
                dragenter: function (e) {

                    return false;
                },
                dragover: function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                },
                dragleave: function (e) {

                    return false;
                },
                drop: function (e) {
                    var dt = e.originalEvent.dataTransfer;
                    console.log(dt.files.length);
                    return false;
                }
            });
});

.uloader
{
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: pink;
	font: 16px helvetica, arial, sans-serif;
	text-align: center;
	color: gray;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 3px;
	position: absolute;
}

.loader
{
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: white;
	font: 16px helvetica, arial, sans-serif;
	text-align: center;
	color: gray;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 3px;
	position: absolute;
}

.loader div, .uloader div
{
	margin-top: 180px;
	font-size: 30px;
}
.overlay
{
	margin: auto;
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: lightgray;
	border:1px dashed black;
}
.container
{
	width: 100%;	
}