Jquery UI draggable event is not released at scrolling

I am applying draggable event of jQuery UI library to a popup window. Dragging works well,but the problem is, if the window has scroll and if I click on the scroll drag event is triggered and popup is being moved and drag event is not released even the scroll event is released... Can you please tel me how to overcome it...

Here is my code snippet.....Please check and let me know what's the error

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

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

 <style>
  #Outer{
   width:400px;
   height:100px;
   border:1px solid blue;
   position:absolute;
    overflow:auto;
  }
  #Hdr{
   background:#ffcc99;
   border-bottom:1px solid blue;
  }
 </style>
 </head>

 <body>
  <div id="Outer">
    <div id="Hdr">About India</div>
    <div>
      The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
      Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a 
      newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
    </div>
  </div>
  </body>

  <script>
   $(document).ready(function(){
    $('#Outer').draggable();
   });
  </script>
</html>

Solution

You may want to use a handler to bypass that problem: Like here fiddle

HTML :

 <div id="Outer">
    <div id="Hdr">About India</div>
    <div id="Inner">
      The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
      Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
      newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
    </div>
  </div>

CSS:

#Outer{
   width:400px;
   border:1px solid blue;
   position:absolute;
  }
#Inner {
   width:400px;
   height:80px;
   position:absolute;
   border:1px solid blue;
   overflow:auto;
}
  #Hdr{
   background:#ffcc99;
   border-bottom:1px solid blue;
  }

JS :

   $(document).ready(function(){
       $('#Outer').draggable({handle: "#Hdr"});
   });