Home/ Questions/Q 8259915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T02:58:16+00:00

I am working in JavaScript and stuck in a problem and need help from

  • 0

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.it working fine in fire fox but not in chrome
Here is a link to Jsfiddle
http://jsfiddle.net/xhMgu/

Thanks any help will be appreciated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should use the “handle” option of the draggable component. Using it, you will delegate the dragging handle to another tag. If you use your top container as a draggable (the default behaviour) you will have the problem that you said. Take a look at my answer here: jQuery UI drag and drop issue with scroll

    • 0