gpt4 book ai didi

jquery - 如何获得可旋转 div 的四个 Angular 旋转句柄 ..?

转载 作者:搜寻专家 更新时间:2023-10-31 08:05:47 25 4
gpt4 key购买 nike

我有一个 div,使用 Jquery UI rotatable 插件来旋转 div。我怎样才能让这个带有绿色 div 四个 Angular 的旋转 handle 旋转。?

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

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

enter image description here

我在 Jsfiddle 中的示例代码..!

最佳答案

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

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

HTML

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

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

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

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

我们现在在 4 个 Angular 上有我们的盒子和 4 个 Handlebars 。

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 个额外的 handle 。
  2. 我们使我们的包装器可拖动,并避免我们的句柄变成盒子包装器的可拖动句柄。
  3. 我们让盒子可以旋转
  4. 添加自定义句柄
  5. 绑定(bind)每个 handle 的mousedown事件触发旋转

简单吧!?哈!如果你想使用这个插件,这里是你必须做的,让它有 4 个 Angular handle 。如果您有任何问题,请发表评论。在实际使用中,您可能会遇到一些有趣的样式问题。

修复可调整大小


更新了 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() 对框的更改保持相对于框大小的句柄。

关于jquery - 如何获得可旋转 div 的四个 Angular 旋转句柄 ..?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38460183/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com