Jquery Ui 可调整大小的自定义处理程序不工作

Question

我遇到了一个问题，我有一个 div，我想使用自定义句柄调整大小。

handles: {
        'nw': '.tl',
        'ne': '.tr',
        'sw': '.bl',
        'se': '.br',
        'e': '.r',
        'w': '.l'
    }

所以我为每个方向都设置了 class。但是当我执行 nw、w 和 sw 不能从左边调整大小时，实际上它们就像是新的 e 和 se。这是一个实时代码以了解更多信息。

http://jsfiddle.net/zhgouqc3/1/

Answer 1

考虑以下示例：

https://jsfiddle.net/Twisty/cdLn56f1/

HTML

<div id="vidsub" style="position: relative; width: 417px; height: 53px; margin: 10px;background: red; z-index: 100;">
  sdsds
  <div class="l ui-resizable-handle ui-resizable-w resizable-wrapper" id="w"></div>
  <div class="r ui-resizable-handle ui-resizable-e resizable-wrapper" id="e"></div>
  <div class="tl ui-resizable-handle ui-resizable-nw" id="nw"></div>
  <div class="tr ui-resizable-handle ui-resizable-ne" id="ne"></div>
  <div class="bl ui-resizable-handle ui-resizable-sw" id="sw"></div>
  <div class="br ui-resizable-handle ui-resizable-se" id="se"></div>
</div>

CSS

.ui-resizable-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgb(255, 0, 106);
  border-width: 1.5px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  border-radius: 999px;
}

.resizable-wrapper {
  width: 8px;
  height: 16px;
}

.l {
  left: -4px;
  top: calc(50% - 10px);
}

.r {
  right: -4px;
  top: calc(50% - 10px);
}

.tl {
  left: -6px;
  top: -6px;
}

.tr {
  right: -6px;
  top: -6px;
}

.bl {
  left: -6px;
  bottom: -6px;
}

.br {
  right: -6px;
  bottom: -6px;
}

JavaScript

$(function() {
  $('#vidsub').resizable({
      handles: {
        'nw': '.tl',
        'ne': '.tr',
        'sw': '.bl',
        'se': '.br',
        'e': '.r',
        'w': '.l'
      }
  });
});

请查看文档：

https://api.jqueryui.com/resizable/#option-handles

Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.

因此您必须调整类以适应手柄的需要。这将处理很多游标和 CSS。此外，您的 Fiddle 设置不正确，已更正。

Jquery Ui 可调整大小的自定义处理程序不工作

Jquery Ui resizable custom handlers not working

html

jquery

jquery-ui