Question

我有一个显示内部图表的<div>。有时这个图形对<div>来说太大了，所以我需要一种方法让用户用鼠标抓住图形并移动它。我找到了jQuery UI Draggable交互，并认为这是我需要的。很容易让基础工作起作用，但是，我无法做到这一点。

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

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

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

Answer 1

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

如果你需要动态调整可拖动的东西，只需重新计算包含选项！

使用jQuery UI拖动Javascript元素

1 个答案: