Question

我试图让画布中的元素顺时针或逆时针旋转，具体取决于单击的箭头。问题是，当您以一种方式然后另一种方式旋转时，第一次单击将在第一次单击时沿先前单击的箭头方向进行。即。单击顺时针旋转，顺时针旋转。然后单击逆时针旋转，第一次单击时，受影响的元素顺时针旋转，然后逆时针旋转，然后每次单击。这种情况发生在两个方向。

希望很清楚。在这里，它并不多。最后的Rotator代码：

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

点击旋转首先进入错误的方向

1 个答案: