jQuery UI可拖动，但有限制

我正在尝试使用jQueryUI创建可拖动滑动门的效果。 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;
}

var elevWrap=$（'.elev-door-wrap'）
$（函数（）{
$（“.elev门”）。可拖动({
光标：“指针”，
轴：“x”，
拖动：函数（事件，ui）{ui.position.left=onDragElev（ui.position.left）；}，
});
});
函数onDragElev（左）{
如果（左>0）{left=0；}
else如果（（elevWrap.width（）+left）<27）{left=27 elevWrap.width（）；}
左转；
}

这基本上是使我能够左右滑动门，并设置一个27px的限制，以确定它在父div中可以拖动多远。然而，我想做的是反转它，以便限制仅在右侧。我尝试将“left”的所有实例都更改为“right”，但这似乎不起作用。相反，它直接从两侧的父div中拖出

在此方面的任何帮助都将不胜感激。非常感谢

更新：我有一个js fiddle链接来帮助说明我的意思。希望能有帮助。

---

把它用完了。它所需要的只是一行代码来控制并传递一个坐标数组作为限制，即

containment: [0, 0, 200, 0]

下面是我在JS Fiddle上更新的工作示例的链接：

---

把它用完了。它所需要的只是一行代码来控制并传递一个坐标数组作为限制，即

containment: [0, 0, 200, 0]

下面是我在JS Fiddle上更新的工作示例的链接：