jQuery UI Resizable resize 事件

jQuery UI 由 GUI 小部件、视觉效果和使用 HTML、CSS 和 jQuery 实现的主题组成。 jQuery UI 非常适合为网页构建 UI 界面。在调整大小操作期间会触发 jQuery UI Resizable resize事件。

句法：

初始化可调整大小的调整大小事件。

$( ".selector" ).resizable({
 resize: function( event, ui ) {}
});

• 将事件侦听器绑定到调整大小事件。

  $( ".selector" ).on( "resize", function( event, ui ) {} );

• 将高度调整大小限制为 27 像素增量。

  $( ".selector" ).resizable({
   resize: function( event, ui ) {
     ui.size.height = Math.round( ui.size.height / 27 ) * 27;
   }
  });

参数：它接受一个有两个参数的回调函数。

event：它接受事件类型值。

ui：它接受如下所示的对象类型值。

• element：表示要调整大小的元素的 jQuery 对象
• helper：表示正在调整大小的助手的 jQuery 对象
• originalElement：代表原始元素的 jQuery 对象，在它被包装之前
• originalPosition：在调整大小之前表示为 { left, top } 的位置
• originalSize：在调整大小之前表示为 { width, height } 的大小
• position：当前位置表示为 { left, top }。可以更改这些值以修改元素的放置位置。对于自定义调整大小逻辑很有用。
• size：当前大小，表示为 { width, height }。可以更改这些值以修改元素的放置位置。对于自定义调整大小逻辑很有用。

CDN 链接：首先，添加项目所需的 jQuery UI 脚本。

示例：此示例演示了 jQuery UI Resizable resize事件。

HTML

  

    
    
    
    
    
    
    
        h1 {
            color: green;
        }
  
        #GFG {
            width: 150px;
            height: 150px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    

  

    
        
            GeeksforGeeks
        
        jQuery UI Resizable resize Events
        
        GeeksforGeeks
    
    
        $(document).ready(function () {
            $("#GFG").resizable({
                resize: function (event, ui) {
                    ui.size.height = 
                      Math.round(ui.size.height / 27) * 27;
                }
            });
            $("#GFG").on("resize", function (event, ui) {
                $("#log").html('Resize operation is going on.');
            });
        });
    

  

输出：

参考： https://api.jqueryui.com/resizable/#event-resize