如何获得一个旋转div的四个角旋转手柄..？

Question

我有一个div,使用Jquery UI rotatable插件来旋转div.我怎么能得到这个旋转手柄与绿色div的四个角旋转.

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

这是样本图像,其中在黑色圆角标记中我需要另外三个可旋转手柄来放置.

我的示例代码在Jsfiddle ..!

Answer 1

这将是一个多部分的答案.首先,我们将通过CSS添加句柄.其次,我们添加事件绑定,以便这些句柄起作用.

完整的工作示例:https://jsfiddle.net/Twisty/7zc36sug/

HTML

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

我根据文档添加了一个包装器:

您也可以使用jQuery UI的内置结合这个插件resizable()和draggable(),虽然当它里面的旋转应用于容器,后者效果最好.有关示例,请参阅演示页面.

CSS

.box {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 27px;
  position: relative;
}

.ui-rotatable-handle {
  background: url("https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/rotate.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25px;
  width: 25px;
  position: absolute;
  //margin: 100px -27px;
}

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

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

.ui-rotatable-handle-se {
  top: 102px;
  left: 102px;
}

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

我们知道有一个句柄,我们知道我们想要4个处于不同位置的人.所以我们设置.ui-rotatable-handle为基本样式.由于.ui-rotatable-handle是动态添加的,并且基于父级,我.box position: relative;使用绝对定位创建然后定位句柄.

我们现在有4个角落的盒子和4把手.

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);
  });
});

1. 我们创造了3个额外的手柄.
2. 我们使包装器可拖动,我们避免我们的手柄成为盒子包装的可拖动手柄.
3. 我们让盒子可以旋转
4. 添加自定义句柄
5. 绑定到mousedown每个句柄的事件以触发旋转

容易吧!？哈!如果你想使用这个插件,你需要做的就是让它有4个角手柄.如果您有疑问,请评论.在实际使用中,您可能会遇到一些有趣的样式问题.

修复可调整大小

更新了CSS以相对于更改大小更好地定位:

.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;
}

这将保留每个边距,并确保resizable()对框的更改保持相对于框大小的句柄.