Create Rotatable Elements - jQuery UI Rotatable

The jQuery UI Rotatable library adds the missing Rotatable functionality to jQuery UI.

The library enables a DOM element to be rotatable with a handle and works perfectly with jQuery UI's resizable and draggable functions.

More features:

• Rotation with mouse wheel.
• Rotation with custom handle.
• Snaps rotatable element to a certain rotation.
• Custom step.
• Allows to specify an angle in degrees/radian.
• Callback functions.

See also:

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

How to use it:

1. Import the jQuery UI Rotatable's JavaScript and Stylesheet into your document. Make sure you first have jQuery and jQuery UI loaded.

<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://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.ui.rotatable.js"></script>
<link rel="stylesheet" href="jquery.ui.rotatable.css">

2. Enable the 'Rotatable' functionality on your element.

<div id="target">
  Element to Rotate
</div>

$('#target').rotatable();

3. All possible parameters to customize the 'Rotatable' functionality.

$('#target').rotatable({

  // specify an angle in radians (for backward compatability)
  angle: false,       

  // specify angle in degrees
  degrees: false,     

  // an image to use for a handle
  handle: false,      

   // where the handle should appear
  handleOffset: {    
    top: 0,
    left: 0
  },

  // specify angle in radians
  radians: false,           

  // offset the center of the element for rotation
  rotationCenterOffset: {   
    top: 0,
    left: 0
  },

  // should the element snap to a certain rotation?
  snap: false,              

  // angle in degrees that the rotation should be snapped to
  step: 22.5,                  

  // other transforms to performed on the element
  transforms: null,   

  // should the element rotate when the mousewheel is rotated?
  wheelRotate: true,   

  // a callback for during rotation
  rotate: function(event, ui) {
  },  

  // callback when rotation starts
  start: function(event, ui) {
  },  

  // callback when rotation stops
  stop: function(event, ui) {
  },  

});

4. Enable & Disable the rotation.

// disable
$('#target').rotatable('disable');

// re-init
$('#target').rotatable('enable');

Changelog:

2020-10-16

• Normalize degrees to have values between 0 and 360

2020-02-29

• Prevent default in mouse wheel listener

---

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