jquery-ui中resizable事件的 stop:function(e,ui){} 的ui.originalSize只是content的width和height-CSDN博客

本文链接：https://blog.csdn.net/Jessie_429/article/details/127861580

1. 结论：

jquery-ui中，resizable() 事件的 stop:function(e,ui){....}中， ui.originalSize的属性值height、width，对应的盒模型，只是content的height、width。不包含内边距和边框！！！
- ① box-sizing: content-box
  - originalSize{ height:_, width_ }是只有content，不包含内边距、边框
  - size{ height:_, width_ }是只有content，不包含内边距、边框
- ② box-sizing: border-box
  - originalSize{ height:_, width_ }是只有content，不包含内边距、边框
  - size{ height:_, width_ }是包含content、内边距、边框的

2. 下面进行验证

将进行给 .resizable-test 元素添加 resizable() 事件

<head>
	<!--引入jquery-ui的css-->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
	    <!--引入 jquery库（必须写在jquery-ui库之前）-->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!--引入 jquery-ui 库-->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
    <div id="resizableDiv"></div>
     
    <script>
    	// jquery入口
        $(function () {
        	// 给 resizable-test 元素添加 resizable 事件
            $("#resizableDiv").resizable({
                stop: function(e,ui) {
                    console.log(ui);
                },
            });
        });
    </script>
</body>

3. 对比不同box-sizing下的情况

3.1 `box-sizing: content-box;`

#resizableDiv {
	box-sizing: content-box;
    width: 300px;
    height: 200px;
    border: 1px solid;
    background-color: pink;
}

（1）拖拽前

在这里插入图片描述

（2）拖拽后

在这里插入图片描述

（3）控制台打印的resizable事件中stop事件的对象ui

对象属性的具体含义可参考菜鸟教程 [https://www.runoob.com/jqueryui/api-resizable.html#event-stop]

3.2 `box-sizing：border-box；`

#resizableDiv {
	box-sizing: border-box;
    width: 300px;
    height: 200px;
    border: 1px solid;
    background-color: pink;
}

（1）拖拽前

在这里插入图片描述

（2）拖拽后

在这里插入图片描述

（3）控制台打印的resizable事件中stop事件的对象ui

对象属性的具体含义可参考菜鸟教程 [https://www.runoob.com/jqueryui/api-resizable.html#event-stop]

jquery-ui中resizable事件的 stop:function(e,ui){} 的ui.originalSize只是content的width和height

1. 结论：

2. 下面进行验证

3. 对比不同box-sizing下的情况

3.1 box-sizing: content-box;

（1）拖拽前

（2）拖拽后

（3）控制台打印的resizable事件中stop事件的对象ui

3.2 box-sizing：border-box；

（1）拖拽前

（2）拖拽后

（3）控制台打印的resizable事件中stop事件的对象ui

3.1 `box-sizing: content-box;`

3.2 `box-sizing：border-box；`