jquery draggable包含缩放容器的数组值

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()但这似乎也不是正确的举动.

---

这是一些示例代码的jsfiddle.

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)

小提琴

在示例中，容器的宽度和高度是在 dragevent 中获取的，您也可以在缩放时存储它们以获得更好的性能。通过在事件内部计算它们，它们在重新缩放后仍然可以工作，尽管仍然需要设置百分比变量。为了真正通用，它也可以在事件内部获取（并且可以使用 ui.helper.parent() 代替固定容器）因为 dragevent 内部的偏移量是 (0,0) 与容器相关（至少它是针对当前设置的），冒昧地简化originalleft + (position - originalposition)/percent为position / percent Start offset 似乎不再需要，因此将其保留在小提琴中，但可以在需要时重新添加。