jquery - 具有可调整大小/可拖动元素的响应式 jQuery UI

Question

我正在尝试使用 jQuery UI 构建一个响应式界面，它允许可移动和可调整大小的元素，即使调整屏幕大小，这些元素也会保持比例。

示例:http://jsfiddle.net/NSLmQ/3/

在用户完成调整大小或拖动后，我使用 dragStop 和 resizeStop 的 UI 回调将像素位置值转换为百分比值。

function resizeStop(event, ui){
    convert_to_percentage($(this));
}

function dragStop(event, ui){
    convert_to_percentage($(this));
}

function convert_to_percentage(el){
    var parent = el.parent();
    el.css({
        left:parseInt(el.css('left'))/parent.width()*100+"%",
        top: parseInt(el.css('top'))/parent.height()*100+"%",
        width: el.width()/parent.width()*100+"%",
        height: el.height()/parent.height()*100+"%"
    });
}

如果父容器具有明确的高度和宽度，这将非常有效 — jQuery UI 在后续调整大小或拖动之前将百分比转换回像素，并且我的回调将它们返回到完成调整大小之后的百分比或拖动。所有的笨蛋。

当可调整大小元素的父元素设置为高度时，问题会在调整大小时发生:自动(在链接的 fiddle 中，我使用子图像为包含的父元素提供高度)

当我尝试调整 UI 元素的大小时，jQuery UI 会错误地将顶部和左侧的百分比转换为像素，并且该元素会跳到适当的位置。

这个问题似乎是 Chrome 特有的。 Firefox 偶尔会出现位置上的小跳动，但它们似乎只是一个细微的舍入差异问题。在 Chrome 中，位置移动非常明显。

虽然在父容器上设置显式高度解决了 UI 问题，但它不允许响应式解决方案。

有什么想法吗？

===========================================

延迟更新

@peteykun 在下面的回答解决了我的基本问题，但我认为有一个分支问题可能值得解决。

Chrome 在计算“自动”大小时使用子像素，因此通过 .height() 使用 jQuery 获取高度会返回不准确的四舍五入答案(并在转换期间导致视觉抖动像素和百分比，反之亦然)。

因此，使用 Vanilla JS .getBoundingClientRect().height 而不是 .height() 会返回亚像素结果以获得无抖动的解决方案。

function setContainerSize(el) {
    var parent = $(el.target).parent().parent();
    parent.css('height',  parent[0].getBoundingClientRect().height+'px');
}

再次感谢您的帮助，@peteykun

Answer 1

如何在调整大小发生之前显式设置容器的高度？

理想情况下，这应该可以通过 .resizable{} 的 start 选项来实现，但我自己尝试了一下，但没有帮助。相反，通过将 .mouseover() 绑定(bind)到句柄，似乎可以达到预期的效果:

$('.box')
.resizable({containment: 'parent', handles: "se", create: setContainerResizer, stop:resizeStop})

function setContainerResizer(event, ui) {
    console.log($(this)[0]);
    $($(this)[0]).children('.ui-resizable-handle').mouseover(setContainerSize);
}

function setContainerSize(el) {
    var parent = $(el.target).parent().parent();
    parent.css('height', parent.height() + "px");
}

JSFiddle: http://jsfiddle.net/w2Jje/4/

---

更新: 为了保持响应性，您可以在调整大小完成后再次将高度设置为auto。检查下面的更新.

function convert_to_percentage(el){
    var parent = el.parent();

    el.css({
        left:parseInt(el.css('left'))/parent.width()*100+"%",
        top: parseInt(el.css('top'))/parent.height()*100+"%",
        width: el.width()/parent.width()*100+"%",
        height: el.height()/parent.height()*100+"%"
    });

    parent.css('height', 'auto'); // Set it back to auto
}

JSFiddle: http://jsfiddle.net/w2Jje/5/

---

更新#2:为了避免鼠标在第二次调整大小之前从未离开 handle 的情况，让我们在 mouseout 上重置高度:

function setContainerResizer(event, ui) {
    console.log($(this)[0]);
    $($(this)[0]).children('.ui-resizable-handle').mouseover(setContainerSize);
    $($(this)[0]).children('.ui-resizable-handle').mouseout(resetContainerSize);
}

function resetContainerSize(el) {
    parent.css('height', 'auto');
}

JSFiddle: http://jsfiddle.net/w2Jje/6/