Create Rotatable Elements - jQuery UI Rotatable

Create Rotatable Elements - jQuery UI Rotatable
File Size: 15.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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. Possble 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: null, 

  // callback when rotation starts
  start: null,    

  // callback when rotation stops
  stop: null

});

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