如何设置 jQuery 可调整大小的小部件以围绕中心调整大小答案

【问题标题】：How to set jQuery resizable widget to resize around the center如何设置 jQuery 可调整大小的小部件以围绕中心调整大小
【发布时间】：2014-04-10 13:25:38
【问题描述】：

jQuery resizable widget 使用左上角坐标作为调整中心。但是我希望我的元素在使用鼠标调整大小时围绕它的中心进行调整。

如果 jQuery 提供这样的选项就好了：

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

但不幸的是，still an open issue 已经两年多了。

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

【问题讨论】：

您是否可以考虑使用 CSS3 转换？如果是这样，您可以使用 CSS3 缩放 div 并将 transform-origin 设置为中心。
这是一个不错的选择，我想当我使用拖动条调整元素大小时最好？我想使用鼠标指针调整元素的大小，右下角有调整大小控件。
您可以在 .selector div 的右下角插入一个小 div，它会响应单击/拖动并相应地更新 scale 属性。至少在理论上！
听起来很划算。让我试试:)

标签： javascript jquery html css jquery-ui

【解决方案1】：

希望对你有所帮助：

考虑一下这个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>

CSS

#resizable { 
            text-align:center;
            width: 350px; 
            height: 150px; 
            padding: 5px;
            overflow: hidden 
        }
        #resize_msg { 
            background-color: #3084DD; 
            color: #fff;
            width: 350px;
            padding: 5px;
            font-size: 14px;
            font-weight: bold;
        }

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

        });

【讨论】：