Javascript 如何将jQuery可调整大小的小部件设置为围绕中心调整大小

在调整中心大小时使用左上角坐标。但我希望我的元素在使用鼠标调整大小时围绕其中心重新缩放

如果jQuery提供如下选项，那就太好了：

$( ".selector" ).resizable({ origin: 'center' });

但不幸的是，这已经过去两年多了

---

是否可以使用当前的jQuery API实现上述功能？

我希望这将帮助您：

考虑一下这个HTML

<div class="demo">
            <div id="temp_resize" style="display: none;width: 350px;"></div>
            <div id="resizable" class="ui-widget-content">
                There are 2 method in css where you can make a div invisible. Its important to 
know how to hide a div or any given container dynamically, to improve the user interactions in 
modern web sites.

  blah blah blah

            </div>

然后jQuery将是：

$(function() {


            $("#temp_resize").html($( "#resizable" ).html());
            var actual_height = $("#temp_resize").height() + 30;

            $( "#resizable" ).resizable({
                minWidth:350,maxWidth: 350,maxHeight:actual_height
            });

            $("#resizable").resize(function() {
                if($('#resizable').height() > (actual_height - 30)){
                    $("#resize_msg").html("No More Content");
                }else{
                    $("#resize_msg").html("Resize For More Content");
                }
            });

        });

---

你能考虑使用CSS3转换吗？如果是这样，您可以使用CSS3缩放div，并将变换原点设置为中心。这是一个很好的替代方案，我想当我使用拖拽条调整元素大小时，这是最好的选择？我想使用右下角带有调整大小控件的鼠标指针调整元素的大小。您可以在.selector div的右下角插入一个小div，该div在单击/拖动时响应，并相应地更新比例属性。至少在理论上是这样！听起来很划算。让我试试：）

$(function() {


            $("#temp_resize").html($( "#resizable" ).html());
            var actual_height = $("#temp_resize").height() + 30;

            $( "#resizable" ).resizable({
                minWidth:350,maxWidth: 350,maxHeight:actual_height
            });

            $("#resizable").resize(function() {
                if($('#resizable').height() > (actual_height - 30)){
                    $("#resize_msg").html("No More Content");
                }else{
                    $("#resize_msg").html("Resize For More Content");
                }
            });

        });