How to set the max drag on jquery-ui

Question

I'm creating a side menu in the phonegap, I need to drag to the left with a -400px wide limit, and to the right with a 400px wide limit, the problem is that I only know to do drag between parent and without limits:

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

---

or

---

$( "#draggable" ).draggable({  axis: "x" });

Answer 1

You can use Array for defining a bounding box in containment like below:

$("#draggable").draggable({
    cursor: 'move',
    //containment: "parent"
    containment: [-400,0,400,$(document).scrollTop()+$(window).height()]
});

Online Demo (fiddle)