How to drag and drop when scrolling is enabled
===

I am working in JavaScript and stuck in a problem and need help from experts.
here is my scenario I have a div which has two divs inside it.I want my outer div to be draggable and one of my inner div has a scrolling option in it

    <div id = "par" class "ui-draggable" style="position: relative; height: 200px; width: 540px;">
    
        <div width="440" height="182" style="float: left;">
        </div>
    
        <div style="width: 100px; height: 182px; float: left; overflow-x: auto; overflow-y: auto; ">
        </div>
    
    </div>

Then I have wrote following code to make my div draggable

     $('#par').draggable();

It working fine and is draggable.
But I am now stuck in a problem that when I click on scroll bar and then try to drop my div.I does not drop.Any idea what I have done wrong or is there a way to correct it.
I an using chrome browser.

Thanks any help will be appreciated  

