jQuery jquery可拖动 - 遏制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14075893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery draggable - containment
提问by Jeff
I have a little project I'm working on, and have an interesting containment issue using jquery's draggable:
我有一个正在处理的小项目，并且使用 jquery 有一个有趣的遏制问题draggable：
Basically, I have two divs - a top & and a bottom. Then, I have a third div that is a .draggable({}) and can be dragged in order to resize the top and bottom div.
基本上，我有两个 div - 一个顶部和一个底部。然后，我有第三个 div，它是 .draggable({}) 并且可以拖动以调整顶部和底部 div 的大小。
-- have a look here: http://jsfiddle.net/Kpt2K/7/
- 看看这里：http: //jsfiddle.net/Kpt2K/7/
The issue is, I'm not able to contain the dragging as I would like. In the fiddle above, I put orange <span>s where I'd like the containment to begin and end.
问题是，我无法按照自己的意愿控制拖动。在上面的小提琴中，我将 orange<span>放在我希望收容开始和结束的地方。
Interesting note: I tried doing something of the following:
有趣的注意事项：我尝试执行以下操作：
$('#container').innerWrap('<div id='containmentBox' />');
var containerHeight = $('#container').height();
$('#containmentBox').css({'height': containerHeight - 45);
this made the containment work for the bottom, but not the top span. So, I think I'm stuck using containment: [x1,y1,x2,y2], but haven't quite grasped how to use it.
这使得底部的遏制工作，但不是顶部的跨度。所以，我想我一直在使用containment: [x1,y1,x2,y2]，但还没有完全掌握如何使用它。
Take a look at the fiddle, and let me know what you can come up with to constrain the draggable movement to inside the two orange spans.
看看小提琴，让我知道你能想出什么来将可拖动运动限制在两个橙色跨度内。
回答by Josep
The containment optionallows an array where to set the positions where to contain it. Try this:
所述容纳选项允许一个阵列，其中，设置的位置在哪里包含它。尝试这个：
var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;
$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });
回答by Mr Tills
You can also use a helper:and this will allow you to add a divwhich you can dynamically set the size of prior the draggable action occurring. This allows you reference it in containment although it's not actually part of the page yet. If you use start:, this divwon't be there by the time draggable function looks for containment element. You can clean up in the stop:
您也可以使用 a helper:，这将允许您添加 a div，您可以动态设置发生可拖动操作之前的大小。这允许您在容器中引用它，尽管它实际上还不是页面的一部分。如果您使用start:，div则在可拖动函数查找包含元素时，它将不存在。您可以在stop:
$(<<selector>>).draggable({
helper: function (event, ui) {
var target = $(this).clone();
var oBody = $(document).find('body');
var containmentDiv = $('<div id="div_containment"></div>');
containmentDiv
.css('top',calculatedTop)
.css('left',calculatedLeft)
.css('width',calculatedWidth)
.css('height',calculatedHeight)
.css('position','absolute');
containmentDiv.appendTo(oBody);
target.children('div').remove();
target.css('background-color','#f00');
return target;
},
stop: function(event, ui) {
$(document).filter('body').find('#div_containment').remove();
},
containment: "#div_containment" //containment via selector
});
You can use a JavaScript object reference to set calculated values in helper:elsewhere
您可以使用 JavaScript 对象引用在helper:其他地方设置计算值
回答by Samuel Caillerie
You can constrain the containment in a bounding-box delimited by the 2 stop elements :
您可以将包含限制在由 2 个停止元素分隔的边界框中：
var top = $("#stop-top").offset().top + $("#stop-top").height();
var bottom = $("#stop-bottom").offset().top - $("#bar").height();
$('#bar').draggable({axis: 'y', containment : [0, top, 10000, bottom] });
JsFiddle : http://jsfiddle.net/Kpt2K/9/
JsFiddle：http: //jsfiddle.net/Kpt2K/9/
回答by Jeff Young
Admittedly the documentation is thin - I had to do a lot of testing to figure it out.
不可否认，文档很薄 - 我必须进行大量测试才能弄清楚。
My mistake was in thinking that the containment array defined a boundary within which the draggable element could move, defined as [x, y, width, height], but I've found that the containment array defines the upper left and lower right points that define the boundary defined as [x1, y1, x2, y2] that the contained elements origincan move within.
我的错误是认为包含数组定义了一个可拖动元素可以在其中移动的边界，定义为 [x, y, width, height]，但我发现包含数组定义了左上角和右下角的点定义边界定义为 [x1, y1, x2, y2] 包含的元素原点可以在其中移动。
This makes sense in that the last two array elements are defined as x2 and y2 (point properties), not w and h (rectangle properties), but the documentation should be more specific as to exactly what these parameters mean in context to the contained element, and within what context (against the contained element's origin) and coordinate system (the contained element's).
这是有道理的，因为最后两个数组元素被定义为 x2 和 y2（点属性），而不是 w 和 h（矩形属性），但文档应该更具体地说明这些参数在上下文中对所包含元素的确切含义，以及在什么上下文中（相对于所包含元素的原点）和坐标系（所包含元素的）。
