CODEWITHSUNDEEP
javascriptjqueryjquery-uioverflowjquery-ui-draggable
bob
bob

Reputation: 784

How to scroll overflow:scroll div while dragging object?

Let's say I have a draggable element with id #draggable. I also have a div that contains a list of droppable divs with id #list. But the container div is limited in height, so it can display only 3 droppable divs at once (A, B and C). That container div is set to overflow:scroll.

How could I manage to get the container div to scroll when I'm dragging the #draggable element over it? Because right now I can't drop the element on last droppable elements that are hidden by the overflow (D, E, F, G).

See this fiddle for demo

<span id="draggable">draggable</span>
<hr>
<div style="height:200px;overflow:scroll">
  <ul id="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

Also, you can that if you drop the element under the overflow:scroll div, it actually drops on the hidden droppable divs!

How to deal with those issues?

Upvotes: 3

Views: 9156

Answers (1)

MatiK
MatiK

Reputation: 573

The easiest solution for you is to move #draggable div inside div with overflow:scroll attached like this:

<div style="height:200px;overflow:scroll">
  <span id="draggable">draggable</span>
  <hr/>
  <ul id="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

See updated fiddle: https://jsfiddle.net/matikucharski/v80kppez/2/

Upvotes: 2

Related Questions