회전하려면 클릭하십시오. 먼저 잘못된 방향으로 이동하십시오.

Question

캔버스의 요소를 어떤 화살표를 클릭했는지에 따라 시계 방향 또는 반 시계 방향으로 회전하려고합니다. 문제는 한 방향에서 다른 방향으로 회전 할 때 첫 번째 클릭이 이전 클릭 된 화살표 방향으로 첫 번째 클릭에서 이동한다는 것입니다. 예. 시계 방향으로 회전하면 시계 방향으로 회전합니다. 그런 다음 시계 반대 방향으로 회전을 클릭하고 처음 클릭하면 영향을받은 요소가 시계 반대 방향으로 시계 방향으로 회전하고 두 번째 클릭시 반 시계 방향으로 회전합니다. 이것은 양방향에서 발생합니다.

희망은 분명합니다. 여기에는 그다지 중요하지 않습니다. 마지막 로테이터 코드 :

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

도움이 되었습니까?

Answer 1

angle += ... 행을 $('.drag').css(...) 행 전에 이동하십시오.

조금 정리하고, 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); 
});