How to get four corners rotate handle for a rotatable div..?

Question

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.

My sample code in Jsfiddle..!

Answer 1

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.

Full working example: https://jsfiddle.net/Twisty/7zc36sug/

HTML

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

I added a wrapper based on the documentation:

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

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.

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. 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

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.

Fix for Resizable

---

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

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