jquery - Rotate image Jquery help, pls fiddle my jsfiddle

Question

I am trying to allow users to rotate image, but no matter what it just does not seem to work. I have the image drag/drop/resize working perfectly, the rotate just does not want to work correctly.

Please have a look and let me know how I can fix this. Thanks.

http://jsfiddle.net/JDzWD/

CODE:

$(function(){  
 //Make every clone image unique.  
   var counts = [0];
    var resizeOpts = { 
      handles: "all" ,autoHide:true
    };    
   $(".dragImg").draggable({
                         helper: "clone",
                         //Create counter
                         start: function() { counts[0]++; }
                        });

$("#dropHere").droppable({
       drop: function(e, ui){
               if(ui.draggable.hasClass("dragImg")) {
     $(this).append($(ui.helper).clone());
   //Pointing to the dragImg class in dropHere and add new class.
         $("#dropHere .dragImg").addClass("item-"+counts[0]);
             $("#dropHere .img").addClass("imgSize-"+counts[0]);

  $("#dropHere .img").addClass("mainTarget-"+counts[0]);
   $("#dropHere #rotate").attr("id", "target-"+counts[0]);
    $("#dropHere .imgSize").attr("id", "mainTarget-"+counts[0]);


   //Remove the current class (ui-draggable and dragImg)
         $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});     
    make_draggable($(".item-"+counts[0])); 
      $(".imgSize-"+counts[0]).resizable(resizeOpts);  
       }

       }


      });


var zIndex = 0;
function make_draggable(elements)
{   
    elements.draggable({
        containment:'parent',
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
        stop:function(e,ui){
        }
    });
}    



   });


//Allow image to be rotated.
var dragging = false;

$(function() {    
    var target = $('[id^=target-]');
    var mainTarget = $('[id^=mainTarget-]');
    var offset = mainTarget.offset();
    target.mousedown(function() {
        dragging = true
    })
    $(document).mouseup(function() {
        dragging = false
    })
    $(document).mousemove(function(e) {
        if (dragging) {

            var center_x = (offset.left) + (mainTarget.width()/2);
            var center_y = (offset.top) + (mainTarget.height()/2);
            var mouse_x = e.pageX; var mouse_y = e.pageY;
            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 120;    
            mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-moz-transform-origin', '50% 50%');
            mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-webkit-transform-origin', '50% 50%');
            mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-o-transform-origin', '50% 50%');
            mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-ms-transform-origin', '50% 50%');
        }
    })
});

HTML:

 <div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg">
     <span id="rotate">Rotate</span></img>
 </div>

CSS:

#dropHere {
    width:400px;
    height: 400px;
    border: dotted 1px black;

}

score 1 · Accepted Answer

Working Fiddle

Change you dropable handler to

$("#dropHere").droppable({
    drop: function (e, ui) {
        if (ui.draggable.hasClass("dragImg")) {
            var the_div  = $(ui.helper).clone()
            $(this).append(the_div);

            //Pointing to the dragImg class in dropHere and add new class.
            the_div.addClass("item-" + counts[0]);
            the_div.find('img').addClass("imgSize-" + counts[0]);

            the_div.find('img').addClass("mainTarget-" + counts[0]);
            the_div.find('span').attr("id", "target-" + counts[0]);
            the_div.find('img').attr("id", "mainTarget-" + counts[0]);

            //Remove the current class (ui-draggable and dragImg)
            the_div.find('img').removeClass("dragImg ui-draggable ui-draggable-dragging");

            $(".item-" + counts[0]).dblclick(function () {
                $(this).remove();
            });
            make_draggable($(".item-" + counts[0]));
            $(".imgSize-" + counts[0]).resizable(resizeOpts);
        }

        $("#target-" + counts[0]).mousedown(function (e) {
            var item_target = $('.item-' + $(this).attr('id').replace('target-', ''));
            item_target.draggable('disable');
            item_target.removeClass("dragImg ui-draggable ui-draggable-dragging ui-state-disabled");
        });


    }


});

to your drop handler in order to disable drag while you are rotating. Also change your code in the $(document).ready() to the below

//Allow image to be rotated.
var dragging = false;
console.log($('[id^=target-]'))
var target = $('[id^=target-]');
var mainTarget = $('[id^=mainTarget-]');
var rotation_target;

$(document).mousemove(function (e) {
    if (dragging) {

        var mainTarget = $('.mainTarget-' + rotation_target.attr('id').replace('target-', '')).parent();

        var offset = mainTarget.offset();
        var center_x = (offset.left) + (mainTarget.width() / 2);
        var center_y = (offset.top) + (mainTarget.height() / 2);
        var mouse_x = e.pageX;
        var mouse_y = e.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 120;
        mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-moz-transform-origin', '50% 50%');
        mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-webkit-transform-origin', '50% 50%');
        mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-o-transform-origin', '50% 50%');
        mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-ms-transform-origin', '50% 50%');
    }
});
$(document).mouseup(function () {
    dragging = false
    $("[class^=item]").draggable('enable');
})
$(document).on('mousedown', '[id^=target-]', function () {
    dragging = true
    rotation_target = $(this);
})

This code will identify the target for rotation when you mousedown so it knows which image to rotate. It will also enable dragging again after the mouse comes back up so you will be able to move the image around after you have finished rotating

Also add the following css

img, span{
    -webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}

to stop highlighting the text when trying to rotate

score 0 · Accepted Answer

Your

target.mousedown(function() {
    dragging = true
})

is being called too soon, it gets executed before the element has been created in the drop area. You need to use .on

$(document).on("mousedown","[id^=target-]",function() {
    dragging = true;
});

also mainTarget will not hold anything either since the element hasnt been created yet, change the mouse move to:

$(document).mousemove(function(e) {
    if (dragging) {
        var mainTarget = $("[id^=mainTarget-]");
        var offset = mainTarget.offset();
        var center_x = (offset.left) + (mainTarget.width()/2);

Your mainTarget id is also not being set

$("#dropHere .imgSize").attr("id", "mainTarget-"+counts[0]);

needs to be

$("#dropHere img[class*=imgSize]").attr("id", "mainTarget-"+counts[0]);

.imgSize does not work as the actual class is imgSize-(somenumber), so using *=imgSize will select an element with class that has the word imgSize in it

Also the rotation of the image will not rotate much as the mouse offset from target span doesnt have much a chance to change, much as it moves with the mouse move. One exception is when you near the window edges. You might want to use some other code to determine the degree by which to rotate, or remove the dragging while rotating

JSFiddle Demo

jquery - Rotate image Jquery help, pls fiddle my jsfiddle

2 回答 2

Related

Reference