1

我有一个<div>在里面显示图表的。有时这个图表对<div>. 我找到了 jQuery UI Draggable 交互，并认为这就是我所需要的。让基础工作很容易，但是，我很难做到这一点。

理想情况下，只能拖动图表以显示隐藏的部分。例如，如果右侧隐藏了更多图形，则可以将其拖动到左侧并查看隐藏的部分。但是，一旦右侧的所有内容都可见，您就不能再将其拖到左侧。如何使用 jQuery UI Draggable 实现类似的功能？可能吗？jQuery UI 是正确的工具吗？

不太理想，但仍然可以，即使图形足够小以适合父级<div>并且没有隐藏任何内容，您也可以将图形拖动到任何您想要的位置。我什至无法让它正常工作。发生的事情是我可以选择不指定该containment选项。然后图形不受约束。现在的问题是图形<div>只有一定的大小（父级的 100% 宽度和高度<div>）。节点以绝对定位放置在此大小之外。然后，当您去拖动图表以显示那些隐藏的节点时，您不能再拖动图表...因为您现在单击图表外部的<div>.

我可能有一个图形容器<div>，我弄乱了它，以便在添加或删除节点时动态调整容器 div 的大小。或者我可以在没有 jQuery UI 的情况下实现这个，只需使用 mousemove 事件。最好的方法是什么？有没有另一个好的图书馆呢？

4

1 回答 1

4

我认为这就是您要查找的内容-您的容器应该是overflow:hidden，您的图表将包含在具有宽度和高度的某些东西中，除此之外，您只需要计算一个“约束”框，这将.offset()是容器，通过计算“溢出”部分添加“额外空间” IE 只允许从offset.left + container.innerWidth() - draggable.width()->拖动东西offset.left

现在，如果这些约束中的任何一个已经“适合”，您需要确保将其“归零”到偏移量，如果它们都适合，则跳过添加可拖动...将它们放在一起，你会得到：

var contain = $("#container"),
    big = $("#bigthing"),
    offset = contain.offset(),
    // calculate the "constraints"
    constraints = [
        offset.left + contain.innerWidth() - big.width(),
        offset.top + contain.innerHeight() - big.height(),
        offset.left,
        offset.top
    ],
    // it "fits" if our left/top constraint is higher or equal to the right/bottom
    fitsX = constraints[0] >= constraints[2],
    fitsY = constraints[1] >= constraints[3];


if (!(fitsX && fitsY)) {
    if (fitsX) {
       constraints[0] = constraints[2];
    }
    if (fitsY) {
       constraints[1] = constraints[3];
    } 
    big.draggable({
        containment: constraints
    });
}

摆弄：http: //jsfiddle.net/gnarf/jqy2b/1/

如果您需要动态调整可拖动事物的大小，只需重新计算包含选项！

于 2011-04-18T09:56:42.590 回答