jquery-ui: dragging element outside viewport

Question

I have a situation in which I have a menu hidden outside the viewport.

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#menu {
    position: absolute;
    width: 100px;
    height: 100%;
    top: 0;
    right: -100px;
}

I also have a draggable element. Now, when I drag the draggable to the right and try to move it outside the viewport (also on the right side), I can make the menu visible by somehow moving the viewport to the left. Checkout the jsfiddle How can I disable this behaviour ?

Answer 1

You can use the Scroll option to prevent the page from scrolling.

$( "#draggable" ).draggable({scroll: false });

DEMO

It can be used together with containment: "parent" to prevent the box sticking out of its parent.

What seem to be happening with your code is that the page is scrolled when you reach the corner and then never scrolled back as you have overflow: hidden set for body.

The downside with using scroll: false is that you won't be able to drag the element down the page either.

Documentation: http://api.jqueryui.com/draggable/#option-scroll

Answer 2

Do you mean you wish to keep it in containment - eg

$( "#draggable" ).draggable({ containment: "parent" });

Like this ?

---

http://api.jqueryui.com/draggable/#option-containment

---

Update : the demo shows the 'containment' away from the element of body - as @Mathias points out the 'overflow hidden' on the body doesn't mean you can't 'drag' to it. So wrapping in elements away from these solves that.