Question

HTML：

<svg width="400" height="110" 
     style="background:red">
 <rect id="rectangle" width="300" height="100" 
   style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
 </svg>

 <div id="firstDiv" 
      style="width:100px;height:100px; background:green">
  </div>

jQuery的：

 jQuery('#firstDiv').resizable({
        handles: 'se',
        animate: true,
        alsoResize: '#rectangle',
    })

使用此示例时， svg 内的 rect 始终从x = 0开始，y = 0，当我们调整 firstDiv 时。

Rect必须从它的最后开始/结束位置开始，而不是从零开始

jquery ui version：jQuery UI - v1.12.1

Answer 1

在我们的可调整大小的方法中添加以下代码

jQuery('#firstDiv').resizable({
        handles: 'se',
        animate: true,
        alsoResize: '#rectangle',    
        resize: function (event, ui) {
           document.querySelector('#rectangle').style.width = ui.size.width;
           document.querySelector('#rectangle').style.height = ui.size.height;
        }
   });

现在一切正常

jQuery resizable - 通过外部div控件

1 个答案: