如何获得四个角旋转手柄的可旋转div ..？ [英] How to get four corners rotate handle for a rotatable div..?

问题描述

我有一个div，使用 Jquery UI可旋转插件旋转div。
我怎么能得到这个旋转句柄与绿色的div的四个角旋转。

I have a div, used Jquery UI rotatable plugin to rotate the div. How i can get this rotate handle with four corners of green colored div to rotate.?

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

这是示例图片，在黑色圆形标记中，我需要另外三个可旋转手柄。

This is the sample image, where in the black rounded mark i need the other three rotatable handle to place.

我的示例代码在 Jsfiddle ..

My sample code in Jsfiddle..!

推荐答案

这将是一个多部分的答案。首先，我们将通过CSS添加句柄。

This will be a multi-part answer. First, we'll add the handles via CSS. Second we add the event bindings so that those handles are functional.

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

HTML

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

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

I added a wrapper based on the documentation:

您还可以将此插件与内置的 resizable（）和 draggable / code>，尽管后者在应用于具有可旋转内部的容器时效果最好。有关示例，请参阅演示页面。

You can also combine this plugin with the jQuery UI built-in resizable() and draggable(), although the latter works best when applied to a container with the rotatable inside it. See the Demo page for some examples.

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

我们知道有一个句柄，在不同的位置。因此，我们设置 .ui-rotating-handle 作为基本样式。因为 .ui-rotating-handle 是动态添加的，并且基于父级，我做了 .box code> position：relative; ，然后使用绝对定位定位句柄。

We know that there is a handle, and we know we want 4 of those in different positions. So we setup .ui-rotatable-handle to be the basic styling. Since .ui-rotatable-handle is added dynamically, and is bases on the parent, I made the .box position: relative; and then positioned the handles using absolute positioning.

我们现在有了我们的框和4个句柄4个角。

We now have our box and 4 handles in the 4 corners.

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个额外的句柄。
$ b $

2. 我们使框可旋转


3. 我们使用自动换行功能，添加自定义处理


4. 绑定到每个句柄的 mousedown 事件以触发旋转

1. we create our 3 extra handles.
2. we make our wrapper draggable and we avoid our handles from becoming draggable handles for the box wrapper.
3. we make the box rotatable
4. add the custom handles
5. bind to the mousedown event of each handle to trigger rotation

很简单！哈！如果你想使用这个插件，这里是你必须做，使它有4个角手柄。如果您有问题，请发表评论在实际使用中，您可能会遇到一些有趣的造型问题。

Easy right!? Ha! If you want to use this plug-in, here is what you have to do to make it have 4 corner handles. Comment if you have questions. In practical use, you might encounter some interesting styling issues.

修复可调整大小

将CSS更新为相对于更改大小更好的位置：

Updated the CSS to position better relative to changing size:

.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（）对框的更改保持相对于框大小的句柄。

This will keep each in the margin and ensure that resizable() changes to the box keep handles relative to the box size.

这篇关于如何获得四个角旋转手柄的可旋转div ..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！