使用 jQuery UI 拖动 Javascript 元素

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() 拖动东西 -> 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/

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