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

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);
        }
    }

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

1. 手柄不再跟随鼠标。我滚动的时间越长，手柄距离光标越长。我在这里根据 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 使元素居中，因此您需要将调整大小的元素的宽度和高度加倍以与鼠标保持同步：

  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"
                        });
                    }
                }