Question

I am trying to create the effect of a draggable sliding door using jquery ui.
HTML is:

<div id ="home-elev-door" class="elev-door-wrap">           
        <div class="elev-door"></div>
</div>

The code I currently have is this:

var elevWrap = $('.elev-door-wrap')

$(function() {
    $( ".elev-door" ).draggable({
        cursor: 'pointer',
        axis: 'x',
        drag : function(event, ui) { ui.position.left = onDragElev(ui.position.left); },
        });
});

function onDragElev(left){
    if ( left > 0 ) { left = 0; }
    else if ( (elevWrap.width()+left) < 27 ) { left = 27-elevWrap.width(); }
    return left;
}

What this basically does is enable me to slide the door to the left and back and sets a 27px limit as to how far it is draggable within the parent div. However, what I want to do is reverse this so that the limit is on the right hand side only. I tried changing all instances of ‘left’ to ‘right’ but this does not seem to work. Instead it drags straight out of the parent div on both sides.

Any help with this would be greatly appreciated. Many thanks in advance.

UPDATE: I have a js fiddle link to help illustrate what I mean. Hopefully it helps.
http://jsfiddle.net/metallikat79/RCGDH/

Answer 1

Sussed it out. All it took was one line of code for containment and passing an array of coordinates as limitations, ie;

containment: [0, 0, 200, 0]

Here is a link to my updated working example on JS Fiddle:
http://jsfiddle.net/metallikat79/RCGDH/2/