1

我正在创建一种编辑器，并具有放大和缩小的能力。这样做的目的是将主要内容区域 css 缩放设置为用户指定的值。

当我集成时，我注意到 jQUery UI .resizable 不再根据鼠标位置调整大小，而是如果内容以 100% 缩放，鼠标将在哪里。这是因为我假设没有考虑缩放百分比。

JSFiddle：http: //jsfiddle.net/qwMkt/

有什么想法可以解决这个问题吗？提前致谢

JS代码：

$(document).ready(function(){
    $('.box').resizable({
        containment: '#container',
        handles: "se",
        scroll: true
    });
});

CSS 代码：

#container{
    zoom: 50%;
    background: #ccc;
    width: 500px;
    height: 500px;
}

#container .box {width: 100px; height: 100px; border: 1px solid #333}
4

2 回答 2

0

我遇到了类似的问题，但使用鼠标位置和当前缩放提出了这个解决方案。在此示例中，我假设您有一个名为的变量current_zoom，它将当前缩放作为浮点数，还有一个名为的变量maintainAspectRatio，表示元素是否要保持其纵横比。

此代码仅支持使用南和东手柄调整大小。如果要使用任何其他代码，则需要扩展代码。例如，我还实现了东南手柄的代码。但是，为了展示最低限度，我将其省略了：

$('.box').resizable({
   ...

   resize: function(event, ui) {
      var $element = ui.element;
      // Gets the axis that the user is dragging.
      var axis = $element.data('ui-resizable').axis;

      // Get the dimensions of the element's bounding box. We can't use 
      // leftOffset + $element.width() because it doesn't factor in the 
      // current zoom. Morever, we can't just multiply $element.width() 
      // by the current zoom to get the zoomed width because it still 
      // gives the wrong value. So we have to be sneaky and use resizable's 
      // resizer overlays to get the right and bottom values.
      var leftOffset = $element.offset().left;
      var topOffset = $element.offset().top;
      var rightOffset = $element.children('.ui-resizable-e').offset().left;
      var bottomOffset = $element.children('.ui-resizable-s').offset().top;

      // We are using the mouse location to calculate the width (during 
      // a horizontal resize) and the height (during a vertical resize) 
      // of the element. This is because we need the resize box to keep
      // up with the mouse when the user is not at 100% zoom.
      var mouseX = event.pageX;
      var mouseY = event.pageY;

      // Must remove the zoom factor before setting width and height.
      var mouseCalculatedWidth = (mouseX - leftOffset) / current_zoom;
      var mouseCalculatedHeight = (mouseY - topOffset) / current_zoom;
      var offsetWidth = (rightOffset - leftOffset) / current_zoom;
      var offsetHeight = (bottomOffset - topOffset) / current_zoom;

      // In order to maintain aspect ratio, we manually calculate it.
      var aspectRatio = offsetHeight / offsetWidth;

      // Resizing using the east handler, set the width of the element.
      // If this element maintains its aspect ratio, also set the height.
      if (axis == "e") {
         $element.width(mouseCalculatedWidth);

         if (maintainAspectRatio) {
            $element.height(mouseCalculatedWidth * aspectRatio);
         }
      }

      // Resizing using the south handler, set the height of the element.
      // If this element maintains its aspect ratio, also set the width.
      if (axis == "s") {
         $element.height(mouseCalculatedHeight);

         if (maintainAspectRatio) {
            $element.width(mouseCalculatedHeight / aspectRatio);
         }
      }
   }

   ...
});// Resizable
于 2014-12-09T15:45:17.617 回答
0

如果我正确理解您的问题，您应该只添加 alsoResize: "#container"到resizable(..)函数的参数中。

请参阅文档：http ://api.jqueryui.com/resizable/#option-alsoResize

于 2017-07-26T18:37:15.293 回答