jquery Draggable - 遏制

Question

我正在做一个小项目，并且使用 jquery 的 draggable 有一个有趣的遏制问题。 :

基本上，我有两个 div - 顶部和底部。然后，我有第三个 div，它是 .draggable({})，可以拖动它来调整顶部和底部 div 的大小。

--看这里:http://jsfiddle.net/Kpt2K/7/

问题是，我无法按照我的意愿控制拖动。在上面的 fiddle 中，我放了橙色 <span>这是我希望收容开始和结束的地方。

有趣的说明:我尝试执行以下操作:

$('#container').innerWrap('<div id='containmentBox' />');

var containerHeight = $('#container').height();

$('#containmentBox').css({'height': containerHeight - 45);

这使得遏制作用适用于底部，但不适用于顶部跨度。所以，我想我被困在使用containment: [x1,y1,x2,y2] ，但还不太掌握如何使用它。

看一下 fiddle ，让我知道您可以想出什么办法将可拖动运动限制在两个橙色范围内。

Answer 1

containment option允许数组设置包含它的位置。试试这个:

var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;

$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

JSFiddle example