Jquery 如何为可旋转的div获取四角旋转手柄。。？

我有一个div，使用

jqueryuirotatable

插件来旋转div。 我如何才能得到这个旋转处理与四个绿色的div角旋转

$('.box').draggable().rotatable();

这是示例图像，在黑色圆形标记中，我需要放置其他三个可旋转手柄

---

我的示例代码在

这将是一个多部分的答案。首先，我们将通过CSS添加句柄。其次，我们添加事件绑定，使这些句柄能够正常工作

完整工作示例：

HTML

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

我们知道有一个把手，我们知道我们想要其中4个在不同的位置。因此，我们将

.ui可旋转手柄

设置为基本样式。由于

.ui可旋转手柄

是动态添加的，并且是基于父级的，因此我将

.box

位置设置为：相对，然后使用绝对定位定位手柄

我们现在有我们的箱子和四个角落的四个把手

jQuery

$(function() {
  // Prepare extra handles
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').rotatable();
  // Assign coordinate classes to handles
  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");
  // Assign handles to box
  $(".box").append(nw, ne, se);
  // Assigning bindings for rotation event
  $(".box div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
    $('.box').rotatable("instance").startRotate(e);
  });
});

这将使每个控制柄保留在边距中，并确保对框所做的
resizeable（）
更改将保持相对于框大小的控制柄。
是否希望控制柄位于所有4个角？@theblindprophet。。是..基于这里的文档：插件似乎不支持这一点。可以通过CSS添加它们，但我不知道它是否能够执行旋转。可能希望找到一个插件，作为选项或默认插件。@ArunValaven找到了一个可行的解决方案来添加句柄并使其响应。目前不适用于
resizeable（）
，我怀疑这是因为我使用了绝对定位。@ArunValaven现在也为
resizeable（）
修复了它。
$(function() {
  // Prepare extra handles
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').rotatable();
  // Assign coordinate classes to handles
  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");
  // Assign handles to box
  $(".box").append(nw, ne, se);
  // Assigning bindings for rotation event
  $(".box div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
    $('.box').rotatable("instance").startRotate(e);
  });
});

.ui-rotatable-handle-sw {
  bottom: -27px;
  left: -27px;
}

.ui-rotatable-handle-nw {
  top: -27px;
  left: -27px;
}

.ui-rotatable-handle-se {
  bottom: -27px;
  right: -27px;
}

.ui-rotatable-handle-ne {
  top: -27px;
  right: -27px;
}