Resizable and draggable box, scrolling problem in the container

Resizable and draggable box, scrolling problem in the container

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jQuery UI Draggable - Handles</title> 
  6. <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> 
  7. <script src="http://jqueryui.com/jquery-1.4.4.js"></script> 
  8. <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
  9. <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
  10. <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
  11. <script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script> 
  12.     <script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script> 

  14. <style> 

  16. #draggable2 { width: 200px; height: 200px; float: left; }
  17. #container {
  18. position: relative;
  19. float:left;
  20. border: 3px #000 solid;
  21. overflow:scroll;
  22. width: 50%;
  23. height: 350px;
  24. background-color:#FFFFFF;
  25. }
  26. </style> 
  27. <script> 
  28. $(function() {
  29. $( "#draggable2" ).draggable();
  30. $( "#draggable2" ).resizable();
  31. $( "div, p" ).disableSelection();
  32. });
  33. </script> 
  34. </head> 
  35. <body> 

  37. <div id="container">
  38.     <div style=" background-color:#FFF" id="draggable2" class="ui-widget-content"> 
  39.        Box
  40.     </div> 
  41. </div>


  44. </body> 
  45. </html>


This is my code, Change the box position.  When the scroll bar appear, resize the box and you'll see scroll bar disappeared.

How can i fix this ?

Thanks.