javascript - 缩放容器的 jquery 可拖动包含数组值

Question

如果有人能帮我弄清楚如何使 div 中包含的可拖动元素根据窗口大小改变比例，我将非常感谢任何指导。

如果我这样做:

element.draggable({ 
    cursor: "move",
    containment: '#container'
});

会发生什么情况是它为我提供了容器常规大小的容器。因此，如果我有一个 transform: scale(1.5)，容器中就会有可拖动元素无法移动的空间。

我也试过 containment: 'parent' 但那是个小问题。

编辑

我已经找到了如何获得顶部和左侧的包含，但我不知道如何获得右侧和底部。

var containmentArea = $("#container");

containment:  [containmentArea.offset().left, containmentArea.offset().top, ???, ???]

我已经从 containmentArea[0].getBoundingClientRect() 中尝试了 width 和 height 但这似乎不正确要么移动。

---

Here is a jsfiddle of some example code.

Answer 1

在拖动事件中重置坐标的版本(因为它们已经为缩放转换重新计算)，而不使用包含:

var percent = 1, containmentArea = $("#container");

function dragFix(event, ui) {
    var contWidth = containmentArea.width(), contHeight = containmentArea.height();
    ui.position.left = Math.max(0, Math.min(ui.position.left / percent , contWidth - ui.helper.width()));
    ui.position.top = Math.max(0, Math.min(ui.position.top  / percent,  contHeight- ui.helper.height()));
}

$(".draggable").draggable({
    cursor: "move",
    drag: dragFix,
});

//scaling here (where the percent variable is set too)

Fiddle

在示例中，容器的宽度和高度是在 dragevent 中获取的，您也可以在缩放时存储它们以获得更好的性能。通过在事件中计算它们，它们在重新缩放后仍然有效，尽管仍然需要设置百分比变量。为了真正通用，它也可以在事件内部获得(并且可以使用 ui.helper.parent() 而不是固定容器)由于 dragevent 内的偏移量与容器相关(至少对于当前设置而言是这样)，因此冒昧地将 originalleft + (position - originalposition)/percent 简化为 位置/百分比开始偏移量似乎不再是必需的，所以将它留在 fiddle 中，但如果需要可以重新添加。