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极限如何远远可以在父分区内拖动。但是，我想要做的是扭转这种情况，以便限制仅在右侧。我尝试将所有“左”的实例更改为“右”，但这似乎不起作用。相反，它直接拖出父母双方。

任何帮助，这将不胜感激。提前谢谢了。

更新：我有一个js小提琴链接来帮助说明我的意思。希望它有帮助。 http://jsfiddle.net/metallikat79/RCGDH/

Answer 1

将其剔除。它只需要一行代码来控制和传递一组坐标作为限制，即;

containment: [0, 0, 200, 0] 

这里是我更新的工作例如链接JS小提琴： http://jsfiddle.net/metallikat79/RCGDH/2/