如何获得四个角旋转手柄的可旋转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()
anddraggable()
, 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);
});
});
- 我们创建了3个额外的句柄。 $ b $
- 我们使框可旋转
- 我们使用自动换行功能,添加自定义处理
- 绑定到每个句柄的
mousedown
事件以触发旋转
- we create our 3 extra handles.
- we make our wrapper draggable and we avoid our handles from becoming draggable handles for the box wrapper.
- we make the box rotatable
- add the custom handles
- 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屋!