Working jsFiddle example: http://jsfiddle.net/Gajotres/ZbFEQ/
These events:
mousedown
mouseup
mousemove
were changed with:
vmousedown
vmouseup
vmousemove
Vmouse events are jQuery Mobile events built to bridge a difference between desktop and mobile devices. They will work in both environments successfully.
Another difference is how they are bound, this:
$('.handle').mousedown(function (e) {
is changed with:
$('.handle').on('vmousedown',function (e) {
Javascript:
$(function () {
var dragging = false,
target_wp,
o_x, o_y, h_x, h_y, last_angle;
$('.handle').on('vmousedown',function (e) {
h_x = e.pageX;
h_y = e.pageY; // clicked point
e.preventDefault();
e.stopPropagation();
dragging = true;
target_wp = $(e.target).closest('.draggable_wp');
if (!target_wp.data("origin")) target_wp.data("origin", {
left: target_wp.offset().left,
top: target_wp.offset().top
});
o_x = target_wp.data("origin").left;
o_y = target_wp.data("origin").top; // origin point
last_angle = target_wp.data("last_angle") || 0;
})
$(document).on('vmousemove',function (e) {
if (dragging) {
var s_x = e.pageX,
s_y = e.pageY; // start rotate point
if (s_x !== o_x && s_y !== o_y) { //start rotate
var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
s_rad += last_angle; // relative to the last one
var degree = (s_rad * (360 / (2 * Math.PI)));
target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-moz-transform-origin', '50% 50%');
target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-webkit-transform-origin', '50% 50%');
target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-o-transform-origin', '50% 50%');
target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-ms-transform-origin', '50% 50%');
}
}
}) // end mousemove
$(document).on('vmouseup', function (e) {
dragging = false
var s_x = e.pageX,
s_y = e.pageY;
// Saves the last angle for future iterations
var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
s_rad += last_angle;
target_wp.data("last_angle", s_rad);
})
})
Tested with:
Firefox 21.0
IE 9,10
Chrome 27.0.1453.116 m
Android 4.1.1 Chrome
iOS iPad 3 Safari