缩放容器的jquery可拖动的包含数组值 [英] jquery draggable containment array values for scaled container

问题描述

如果有人能帮助我弄清楚如何使div中包含的可拖动元素根据窗口大小更改缩放比例，我将不胜感激任何指导.

If anyone could help me figure out how to make the draggable elements contained in a div that changes scale based on window size, i'd really appreciate any guidance.

如果我这样做:

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

将要发生的事情是，它为我提供了常规尺寸容器的容纳空间.因此，如果我有transform: scale(1.5)，则容器中将存在可拖动元素无法移动的空间.

What will happen is it gives me the containment for the regular size of the container. So if I have a transform: scale(1.5), there will be space in the container that the draggable element can not go.

我也尝试过containment: 'parent'，但是出现了小故障.

I've also tried containment: 'parent' but that get's very glitchy.

编辑

我已经找到了如何获得顶部和底部收容的方法，但是我不知道如何获得顶部和底部的收容物.

I've found out how to get the top and left containment but I can't figure out how to get the right and bottom.

var containmentArea = $("#container");

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

我已经尝试过containmentArea[0].getBoundingClientRect()的宽度和高度，但这似乎也不是正确的举动.

I've tried width and height from containmentArea[0].getBoundingClientRect() but that doesn't seem to be the right move either.

此处是一些示例代码的jsfiddle.

推荐答案

一个版本，它在拖动事件中重置坐标(因为已经针对比例转换对其进行了重新计算)，而无需使用包含项:

A version with resetting the coordinates in the drag event (since they were being recalculated already for the scale transformations), without using the containment:

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 似乎不再需要开始偏移，因此将它放在小提琴中，但是可以根据需要重新添加.

In the example width and height of the container are obtained inside the dragevent, you could also store them when scaling for better performance. By having them calculated inside the event, they still work after rescaling, although the percent variable still has to be set. To be truly generic, it could be obtained inside the event as well (and instead of a fixed container, ui.helper.parent() could be used) Since the offset inside the dragevent is (0,0) related to the container (at least it is for the current setup), took the liberty of simplifying originalleft + (position - originalposition)/percent to position / percent Start offset didn't seem to be necessary any more, so left it out in the fiddle, but can be re-added if needed.

这篇关于缩放容器的jquery可拖动的包含数组值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！