Michael Young Michael Young - 4 months ago 24
jQuery Question

Click to rotate goes in wrong direction at first

I am trying to have elements in a canvas rotate either clockwise or counter-clockwise depending on which arrow is clicked. The problem is that when you rotate one way and then another, the first click will go in the previously clicked arrow's direction on the first click.
ie. click rotate clockwise and it rotates clockwise. Then click rotate counter-clockwise and the first time you click it, the effected elements rotate clockwise on the then counter-clockwise on the second and each click afterwards. This happens in both directions.

Hope that's clear. Here, there's not much to it. Rotator code at the end:

$(document).ready(function(){
counter = 0;

//draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',



//first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter++
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");

//existing dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});

//droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9][0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
draggedNumber = ui.helper.attr('id').search(/drag([0-9][0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)

$("#clonediv"+counter).addClass(itemDragged);

$("ol").append($("div").attr("data-piece") + "<br>" );
}
}
});

//trash can
$("#trash").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) {
tolerance: 'fit', $(ui.draggable).remove();
$("ol").detach();
}
});

//rotator
var angle = 22.5;

$('#spin').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=22.5;
});
$('#spin2').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=-22.5;
});
});


Any help is much appreciated!

Answer

Try moving the angle += ... lines before the $('.drag').css(...) lines.

Cleaned up a little, and starting at angle = 0:

// rotator
var angle = 0;

function rotateTo(angle) {
  var value = 'rotate(' + angle + 'deg)';

  $('.drag').css({
    '-webkit-transform': value,
    '-moz-transform': value,
    '-o-transform': value,
    '-ms-transform': value,
  });
}

$('#spin').click(function() {
  angle += 22.5;
  rotateTo(angle);
});

$('#spin2').click(function() {
  angle -= 22.5;
  rotateTo(angle);
});
Comments