Question

我一直在尝试使用jQuery resizable来调整可滚动容器中的元素大小。我需要能够使元素大于视口中的元素，因此页面必须在调整大小时滚动。我怎么做？

请注意，该元素也是可拖动的，但不是同一个句柄（我不确定这是否会影响解决方案？）当我尝试时，我在滚动页面时出现了不跟随鼠标的句柄问题。

首先，当我调整元素大小并向下拖动鼠标时，页面不会滚动。因此，我在可调整大小的元素的resize事件上添加了以下（可能不正确），以便在句柄靠近上边框或下边框时滚动：

    resize: (event, ui) => {
        var container = $(".container");
        var pos = ui.originalPosition.top + ui.size.height;
        var currentH = container.outerHeight() + container.scrollTop();

        if (pos+20 >= currentH) {
            container.scrollTop(pos + 20 - container.outerHeight());
        }
        if (pos-20 <= container.scrollTop()) {
            container.scrollTop(pos-20);
        }
    }

这使页面滚动但是，我得到了问题：

手柄不再跟随鼠标。并且我从光标处滚动的时间越长，句柄就越长。我在这里根据TJ VanTolls fiddle http://jsfiddle.net/tj_vantoll/YwMXS/重新创建了这个问题：

$('#inner').resizable({
    containment: '#outer',
    handles: 'all'
});

body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }

#outer, #inner {
    border: 1px solid black;
}
#outer {
    width: 400px;
    height: 300px;
    overflow-y: scroll;
}
#inner {
    height: 200px;
    width: 200px;
    top: 50px;
    left: 50px;
}
#content {
    height: 2000px;
    width: 200px;
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
When scrolling during resize the handle does no longer follow the mouse.
To recreate: start resizing and during the resize scroll the parent.</p>

<div id="outer">
    <div id="inner"></div>
    <div id="content"></div>
</div>

所以我的问题是，你知道如何在不引起第二个问题的情况下修复我的第一个问题，或者是否有办法解决第二个问题？提前谢谢！

Answer 1

我知道现在有点晚了，但是这对我有用，问题是您的CSS使元素居中，因此您需要将调整大小的元素的宽度和高度加倍才能与鼠标保持同步：< / p>

  resize: function (event, ui) {
                    var newWidth = ui.originalSize.width + ((ui.size.width - ui.originalSize.width) * 2);

                    //restrict min size if you want
                    if (newWidth < 50) {
                        newWidth = 50;
                    }
                    var newHeight = ui.originalSize.height + ((ui.size.height - ui.originalSize.height) * 2);

                    //restrict min size if you want
                    if (newHeight < 50) {
                        newHeight = 50;
                    }

                    //constrain this to the immediate parent
                    var parent = $(this).closest(".my-container");
                    if (parent.length) {
                        $(this).width(newWidth).position({
                            of: parent,
                            my: "center center",
                            at: "center center"
                        });
                        $(this).height(newHeight).position({
                            of: parent,
                            my: "center center",
                            at: "center center"
                        });
                    }
                }

jQuery resizable：在可滚动容器游标中调整元素大小时会丢失句柄

1 个答案: