jQuery UI可拖动，但有限制

Question

我正在尝试使用jquery ui创建可拖动的滑动门的效果。HTML是：

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

我目前的代码是这样的：

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;
}

这基本上是使我能够向左和向后滑动门，并设置27px的限制，限制它在父div中可拖动的距离。然而，我想要做的是颠倒这一点，这样极限只在右边。我尝试将“left”的所有实例更改为“right”，但这似乎不起作用。相反，它直接从两侧的父div中拖出。

在这方面的任何帮助都将非常感谢。在此之前，非常感谢您。

更新:我有一个js fiddle链接来帮助说明我的意思。希望这能有所帮助。http://jsfiddle.net/metallikat79/RCGDH/

Answer 1

弄清楚了。所有它需要的是一行代码来限制和传递一个坐标数组作为限制，即；

containment: [0, 0, 200, 0]

下面是我更新的JS Fiddle工作示例的链接：http://jsfiddle.net/metallikat79/RCGDH/2/