Question

我需要“用户友好”旋转，拖动和调整大小的DIV。但是，当旋转此DIV时，RESIZE功能非常有效。不像图像编辑器。用户无法正确处理调整大小。如何制作？

HTML：

<div id="blue"></div>

CSS：

#blue {
  top: 100px;
  left: 100px;
  width:200px;
  height:200px;
  background-color:blue;
  -ms-transform: rotate(120deg); /* IE 9 */
  -webkit-transform: rotate(120deg); /* Safari */
  transform: rotate(120deg);
}

的jQuery

$("#blue").resizable({
    aspectRatio: false,
    handles: 'ne, se, sw, nw'
});

$("#blue").draggable();

Answer 1

处理类似的问题：How to get four corners rotate handle for a rotatable div..?

在此，OP希望为每个角添加旋转手柄。但它也是你报道的一个很好的例子。

看看：https://jsfiddle.net/Twisty/7zc36sug/

<强> HTML

<div class="box-wrapper">
  <div class="box">
  </div>
</div>

包装盒有助于Draggable。

<强>的jQuery

$(function() {
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').resizable().rotatable();
});

在旋转角度时调整大小会改变盒子的位置，宽度和高度，并使其以某种奇怪的方式移动。这就是它在某些图形程序中不起作用的原因。

由于您没有说明您希望行为者喜欢什么，我无法正确回答您的问题：用户无法正确处理调整大小。如何制作？

我希望这有助于解释这个问题。

jQuery UI - 像在图像编辑器中一样旋转，拖动，调整DIV大小

1 个答案: