jQuery可拖动-遏制 [英] jquery draggable - containment

问题描述

我有一个正在处理的小项目，并且使用jquery的draggable有一个有趣的收容问题:

I have a little project I'm working on, and have an interesting containment issue using jquery's draggable:

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

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.

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

问题是，我无法按需包含拖动.在上面的小提琴中，我将橙色的<span>放到我希望容器开始和结束的位置.

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.

有趣的提示:我尝试执行以下操作:

Interesting note: I tried doing something of the following:

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

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

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

这使遏制工作在底部，但没有在顶部跨度.所以，我想我一直在使用containment: [x1,y1,x2,y2]，但是还不太了解如何使用它.

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.

看看小提琴，让我知道您可以想出什么来将可拖动的运动限制在两个橙色范围内.

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.

推荐答案

包含选项允许在一个数组中设置包含它的位置.试试这个:

The containment option allows 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] });

JSFiddle示例

这篇关于jQuery可拖动-遏制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！