Advanced Touch-friendly Rotatable Plugin For jQuery UI - ui-rotatable

An advanced and performant rotatable plugin for jQuery UI that makes use of CSS3 2D transforms to rotate an element with handle, mousewheel and touch events.

How to use it:

1. Load the necessary jQuery and jQuery UI in the document.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Load the jqueryui-touch-punch library to enable the support of touch events (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

3. Download and load the jQuery ui-rotatable plugin after jQuery & jQuery UI libraries.

<script src="jquery.ui.rotatable.js"></script>

4. Enable the rotatable functionality on an element you specify.

<div class="box">
...
</div>

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

5. You can also chain together other jQuery UI widgets such as draggable, resizable, etc.

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

6. Apply your own CSS styles to the rotate handle.

.ui-rotatable {
  /* styles here */
}

.ui-rotatable-rotating {
  /* styles here */
}

.ui-rotatable-handle {
  /* styles here */
}

7. Possible options to customize the plugin.

$('.box').rotatable({
  classes: {},
  create: null,
  distance: 1,
  delay: 0,
  disabled: false,
  alsoRotate: false,
  angle: 0, // 0-360
  handle: true,
  handleElementSelector: '<div></div>',
  rotationOriginPosition: {
    top: null,
    left: null
  },
  snap: false,
  snapStep: 22.5,
  wheel: true, // mousewheel
  wheelingVerticalStep: null,
  wheelingHorizontalStep: null
});

8. Available callback functions.

$('.box').rotatable({

  // when rotation starts
  start: function (event, ui) { return true; },

  // while rotating
  rotate: function (event, ui) { return true; },

  // when rotation stops
  stop: function (event, ui) { return true; }
  
});

---

This awesome jQuery plugin is developed by abdullahpazarbasi. For more Advanced Usages, please check the demo page or visit the official website.