如果有人可以帮助我弄清楚如何使 div 中包含的可拖动元素根据窗口大小更改比例,我将非常感谢任何指导。
If I do:
element.draggable({
cursor: "move",
containment: '#container'
});
将会发生的事情是它为我提供了容器常规尺寸的遏制。所以如果我有一个transform: scale(1.5)
,容器中会有可拖动元素无法去的空间。
我也尝试过containment: 'parent'
但这非常有问题。
EDIT
我已经找到了如何获得顶部和左侧的遏制,但我不知道如何获得右侧和底部的遏制。
var containmentArea = $("#container");
containment: [containmentArea.offset().left, containmentArea.offset().top, ???, ???]
我试过了width and height from containmentArea[0].getBoundingClientRect()
但这似乎也不是正确的举动。
这是一些示例代码的 jsfiddle。 http://jsfiddle.net/z0gqy9w2/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 http://jsfiddle.net/z0gqy9w2/7/
在示例中,容器的宽度和高度是在 Dragevent 内获取的,您也可以在缩放时存储它们以获得更好的性能。通过在事件内部计算它们,它们在重新缩放后仍然可以工作,尽管仍然需要设置百分比变量。为了真正通用,它也可以在事件内部获取(并且可以使用 ui.helper.parent() 而不是固定容器)
由于 Dragevent 内的偏移量是 (0,0) 与容器相关(至少对于当前设置来说是这样),因此冒昧地简化了originalleft + (position - originalposition)/percent
to position / percent
开始偏移似乎不再需要,因此将其保留在小提琴中,但如果需要可以重新添加。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)