Click to rotate geht zuerst in die falsche Richtung

Question

Ich versuche, Elemente in einer Leinwand entweder im oder gegen den Uhrzeigersinn zu drehen, je nachdem, auf welchen Pfeil geklickt wird. Das Problem besteht darin, dass der erste Klick beim ersten Klick in die Richtung des zuvor angeklickten Pfeils erfolgt, wenn Sie den einen oder anderen Weg drehen. dh. Klicken Sie im Uhrzeigersinn und es dreht sich im Uhrzeigersinn. Klicken Sie dann gegen den Uhrzeigersinn und wenn Sie das erste Mal klicken, drehen sich die betroffenen Elemente im Uhrzeigersinn, dann im Gegenuhrzeigersinn und danach. Dies geschieht in beiden Richtungen.

Hoffe, das ist klar. Hier ist nicht viel dabei. Rotator-Code am Ende:

$(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; 
    }); 
}); 

Jede Hilfe wird sehr geschätzt!

Answer 1

Versuchen Sie, die angle += ... Zeilen vor die $('.drag').css(...) Zeilen zu verschieben.

ein wenig Aufgeräumt und ab 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); 
});