jQuery UI Rotatable Interaction

jquery-ui-rotatable

About

A jQuery UI Interaction which rotates any element by using CSS transform rotate(). Inspired by jQuery UI Resizable and Aidan Rogers's (godswearhats) jquery-ui-rotatable

Features

• Supports CSS 2D transforms (only 2D)
• Rotation by mouse wheel
• Rotation with/without handle
• Compatible with other jQuery UI widgets and interactions included Draggable and Resizable
• Compatible with Dave Furfero's jQuery UI Touch Punch
• All angles in degrees
• "alsoRotate" extension (under construction)
• "animate" extension (under construction)

Requirements

• jQuery UI v1.9.2 Core
• jQuery UI v1.9.2 Core - Widget
• jQuery UI v1.9.2 Core - Mouse

CDN

.

Options

{
    disabled: false,
    angle: 0,
    handle: true,
    handleElementSelector: '<div></div>',
    rotationOriginPosition: {
        top: null,
        left: null
    },
    snap: false,
    snapStep: 22.5,
    rotate: function (event, ui) {}, // callback while rotating
    start: function (event, ui) {}, // callback when rotation starts
    stop: function (event, ui) {}, // callback when rotation stops
    wheel: true,
    wheelStep: 7.5
}

Used CSS Classes

.ui-rotatable {}
.ui-rotatable-rotating {}
.ui-rotatable-handle {}

Usages

$('#foo .bar').rotatable();

---

$('#foo .bar').resizable().rotatable().draggable();

---

$('#foo .bar').rotatable({ angle: 30 });

Demo

(coming soon)

Thanks

Thanks to jQuery UI Development Team (https://jqueryui.com/about/)

Thanks to Aidan Rogers (https://github.com/godswearhats/jquery-ui-rotatable)

License

Released under the MIT license, like jQuery

Authors

Abdullah Pazarbasi http://www.abdullahpazarbasi.com