使用 jQuery UI 拖动 Javascript 元素

Question

我有一个

，里面显示一个图表。有时这个图表对于

来说太大了，所以我需要一种方法让用户用鼠标抓取图表并移动它。我发现了 jQuery UI Draggable 交互，并认为这就是我所需要的。让基础知识发挥作用很容易，但是，我在正确执行此操作时遇到了困难。

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

尽管不太理想，但仍然可以，即使图形足够小以适合父

并且没有隐藏任何内容，您也可以将图形拖动到任何您想要的位置。我什至无法让它正常工作。发生的情况是我可以选择不指定 containment 选项。那么图形就不受约束了。现在的问题是图形的

只有一定的大小（父级

的 100% 宽度和高度） ）。节点以绝对定位放置在该大小之外。然后，当您拖动图形以显示那些隐藏节点时，您将无法再拖动图形...因为您现在正在单击图形的

外部。

我也许可以有一个图形容器

，我可以用它来使事情正确，并在添加或删除节点时动态调整该容器 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
    });
}

Fiddled: http://jsfiddle.net/gnarf/jqy2b/1/

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