jquery ui draggable scroll auto

Question

I want to implement draggable on a container with fixed height and width but has scrolls on demand that mimics infinite surface.

Here is the css

.drag {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 10px;
    text-algin: center;
    background-color: lightpink;
}

Here is the html. Box is the container with fixed width and height but has overflow auto.

<div id="box" style="width:500px;height:300px;border:1px solid black;background-color:lightgreen;overflow:auto;">
    <div id="dragx" class="drag"><p>Drag me</p></div>
</div>

Here is the javascript.

$(function () {
    $("div[id='dragx']").draggable({
        containment: "#box",
        scroll: true
    });
});

Full running example can be found at http://jsbin.com/tafof/2/edit?html,output

Basically when I drag the div to extreme down or extreme right I would like the scroll bars to show up and allow me to drag as far as possible. But currently it doesn't allow me to drag outside of the fixed width and height.

What do I need to make the scroll bars show on demand when I drag to the extreme?

score -1 · Answer 1 · answered May 14 '15 at 08:04

-1

You need your #box to have overflow: scroll property instead of auto.

answered May 14 '15 at 08:04

onedayiwillchangethis

133
1
1
8

I want to show the scroll only if the canvas is larger so scroll will not work. – prabir May 14 '15 at 19:54
@prabir so use javascript to change overflow property depending on your elements x and y positions – onedayiwillchangethis May 15 '15 at 07:47

jquery ui draggable scroll auto

1 Answers1