我在box-wrapper中有两个盒子。旋转框时，inner框也应旋转。但是，问题是，内部盒子不会旋转。
注意：我必须将两个框都设为position:absolute作为同级。
<div class="box-wrapper">
<div class="inner">
RED BOX
</div>
<div class="box">
</div>
</div>
请检查下面的完整代码：
旋转外盒时旋转内盒
•
问答
suixinyu2009 回答：旋转外盒时旋转内盒
按如下所示更改代码，
$(function() {
// Prepare extra handles
var nw = $("<div>",{
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
/*
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.
*/
// Assign Draggable
$('.box-wrapper').draggable({
cancel: ".ui-rotatable-handle"
});
// Assign Rotatable
$('.box').resizable().rotatable({rotate:function(event,ui){
var angle = ui.angle.current;
$('.inner').css('transform','rotate('+angle+'rad)');
}});
// 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);
});
});.box {
border: 2px solid black;
width: 100px;
height: 100px;
background:transparent;
margin: 27px;
position: absolute;
}
.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;
}
.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;
}
.inner{
background: red;
width: 70px;
height: 70px;
position: absolute;
top: 15px;
left:43px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<div class="box-wrapper">
<div class="inner">
RED BOX
</div>
<div class="box">
</div>
</div>