问

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

暗恋具体哦发布于 2023-02-08 17:00

jquery

http

function

css

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

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

我使用的UI回调dragStop和resizeStop像素位置值转换为百分比值,用户已经完成了调整大小或拖动后.

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将百分比转换回像素,并且在完成调整大小或拖动之后,我的回调将它们返回到百分比.所有的笨蛋.

当resizable元素的父级设置为height:auto时(在链接的小提琴中,我使用子图像为包含的父级提供高度),在调整大小期间会出现问题

当我尝试调整UI元素的大小时,jQuery UI会不正确地将顶部和左侧的百分比转换为像素,并且元素将跳转到位.

此问题似乎是特定于Chrome的.Firefox偶尔会出现迷你跳跃,但它们似乎只是略微四舍五入的问题.在Chrome中,位置转移是戏剧性的.

虽然在父容器上设置显式高度可以解决UI问题,但它不允许响应式解决方案.

有任何想法吗？

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

晚更新

@ peteykun的答案解决了我的根本问题,但有一个分支问题,我认为可能值得解决.

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

因此,使用Vanilla JS .getBoundingClientRect().height代替.height()返回子像素结果,以获得无抖动的解决方案.

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

再次感谢您的帮助,@ peteykun

1 个回答

如何height在调整大小之前显式设置容器？

理想情况下,这应该可以start选择.resizable{},但我自己尝试了,但它没有帮助.相反,通过将a绑定.mouseover()到句柄,似乎可以实现所需的效果:

$('.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:为了解决在第二次调整大小之前鼠标永远不会离开句柄的情况,让我们重新设置鼠标输出的高度:

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/

2023-02-08 17:01 回答

偶说撒浪嘿

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签