CODEWITHSUNDEEP
jqueryjquery-ui
smzapp
smzapp

Reputation: 829

Rotate the inner box as I rotate the outer box

I have two boxes inside a box-wrapper. As I rotate the box, the inner box should also rotate. But, the problem is, the inner box doesn't rotate.

Note: I have to make both boxes be position:absolute as siblings.

<div class="box-wrapper">
  <div class="inner">
   RED BOX
  </div>
  <div class="box">
  </div>
</div>

Please check the complete code below:

https://jsfiddle.net/1p9b0q5c/2/

Upvotes: 0

Views: 62

Answers (1)

Shijin TR
Shijin TR

Reputation: 7768

Change your code like as follows,

$(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>

Upvotes: 3

Related Questions