Create Smooth Rotatable Elements with jQuery | UI Rotatable

Create-Smooth-Rotatable-Images

jquery-UI-rotatable is a jQuery UI plugin that works in a similar way to Draggable and Resizable, without being fully-featured. By default, it places a small spin icon at the bottom left of any item that you want to make rotatable.

jquery ui rotatable, jquery drag resize and rotate image, drag and rotate javascript, rotate image with mouse javascript, jquery draggable rotate, javascript rotate element

How to make use of it:

1. Import the jQuery UI Rotatable’s JavaScript and Stylesheet into your doc.

<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 in your component.

<div id="target">
  Element to Rotate
</div>
$('#target').rotatable();

3. All attainable 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');

Create Rotatable Elements, jquery ui rotatable Plugin/Github, drag and resize image jquery, rotate js

Create-Smooth-Rotatable-Images-Demo


See Demo And Download

Official Website(godswearhats): Click Here

This superior jQuery/javascript plugin is developed by godswearhats. For extra Advanced Usages, please go to the official website.