jquery droppable is not working

Guys. I spent few hours just for checking my jquery, why it doesn't work well. Just confused why droppable function doesn't firing alert when the square div has dropped into box's div.

Here is my html

<html>
<head>
<title>jquery - draggable </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

    <script src="js/javascript.js"></script>
</head>
<body>
<div class="container">
    <div id="square"></div>
    <br>        
    <div id="box"></div>
</div>
</body>
</html>

And this is my style

#box {
    margin: 0 auto;
    background: #ecf0f1;
    border-radius: 10px;
    border-style: dashed;
    height: 100px;
    width: 100px;
}
#square {
    margin: 0 auto;
    background: #3498db;
    border-radius: 10px;
    height: 100px;
    width: 100px;
}

And this is my javascript

$(document).ready(function(){
    $("#square").draggable();

    $("#box").droppable({
        drop: handleDropEvent
    });

    function handleDropEvent(event, ui){
        alert('Hello');
    }

});

Any help would be appreciated. Thank you!

Solution

Play with droppables tolerance option.

"fit": Draggable overlaps the droppable entirely.
"intersect": Draggable overlaps the droppable at least 50% in both directions.
"pointer": Mouse pointer overlaps the droppable.
"touch": Draggable overlaps the droppable any amount.

$(document).ready(function(){
    $("#square").draggable();

    $("#box").droppable({
        drop: handleDropEvent,
      	tolerance:"pointer"
    });

    function handleDropEvent(event, ui){
        alert('Hello');
    }

});

#box {
    margin: 0 auto;
    background: #ecf0f1;
    border-radius: 10px;
    border-style: dashed;
    height: 100px;
    width: 100px;
}
#square {
    margin: 0 auto;
    background: #3498db;
    border-radius: 10px;
    height: 100px;
    width: 100px;
}

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>jquery - draggable </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

    <script src="js/javascript.js"></script>
</head>
<body>
<div class="container">
    <div id="square"></div>
    <br>        
    <div id="box"></div>
</div>
</body>
</html>