0

I am working on an app, where i want to rotate an image circularly.

I tried many solutions on SO. but i was not able to make it. But i got this link which works perfect for web http://jsfiddle.net/mgibsonbr/tBgLh/11/.

I tried to modify the mousedown to touchstart, mouseup to touchend and mousemove to touchmove and bind the functions. But i was not able to achieve it.

can i know how can i accomplish the same for jquery-mobile.

Thanks:)

4

1 回答 1

2

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

于 2013-07-02T13:15:32.327 回答