Поворот влево и вправо не работает должным образом - PullRequest
Новая
       12

Поворот влево и вправо не работает должным образом

0 голосов
/ 28 февраля 2020

У меня есть div, к которому я добавил два пролета и кнопку, эти промежутки должны повернуть div влево и повернуть его вправо. Правый диапазон называется поворотом вправо, а левый - поворотом влево. Это дочерние элементы родительского элемента div, называемого таблицей. 

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" style="inset:69px auto auto 445px;">
    <div class="removet"></div>
    <span class="fa fa-edit editdiv"></span>
    <span class="fa fa-rotate-left rotateleft"></span>
    <span class="fa fa-rotate-right rotateright"></span>
</div>

Это приводит к следующему разделению.

enter image description here

Вот и CSS для таблицы, просто добавьте css для таблицы, которая конфликтует с моим оператором Transform. 

.square4 {
  cursor: move;
  width: 133px;
  height: 133px;
  position: absolute !important;
  background-image: url(parts/table4.png);
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 17px;
  font-weight: bold;
  color: #00f;
  border: 1px solid #ccc;
  border-radius: 6%;
  -moz-border-radius: 6%;
  -webkit-border-radius: 6%;
  left: 741px;
  top: -141px;
}

Когда пользователь нажимает влево или вправо, родительский элемент div должен поворачиваться на 15 градусов, однако, когда я нажимаю кнопку поворота вправо, ничего не происходит, а когда я нажимаю кнопку поворота влево, он устанавливает градусы для поворота 0, что является первым значением, а не значением, которое Я нуждаюсь. У меня есть мои значения, установленные в массиве от 0 до 360 градусов, они go увеличиваются на 15 градусов при каждом щелчке по повороту вправо или go назад на 15 градусов при щелчке по повороту влево.

Div добавляются к элементу dropareable, называемому mainarea, с использованием JQuery пользовательского интерфейса, поэтому я использую .on click. Щелчок обнаружен, это просто преобразование, с которым у меня проблема.

Я проверил массив и щелчки кнопок, чтобы убедиться, что они работают, я использовал console.log для проверки угла [текущий] и возвращаются правильные значения, я думаю, что это как-то связано с моим оператором transform и с тем, как я его устанавливаю, я пробовал разные способы и мне не повезло.

Я использую Elementor, так что мой document.ready немного отличается от обычного способа, но это из-за того, как работает Elementor, если вы хотите sh проверить его, вы можете просто заменить его на оператор готового документа, но я хотел показать мой точный код. 

document.addEventListener("DOMContentLoaded", function(event) 
{
    var angle = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315 , 330, 345, 360];
    var current = 0;

   jQuery(document).on('click','.table > .rotateright',function(event)
    {
       current++;

        if(current == 25)
        {
            current = 0;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

       console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
   });

    jQuery(document).on('click','.table > .rotateleft',function(event)
    {
        current--;

        if(current == -1)
        {
            current = 24;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

        console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
    });
});

1 Ответ

1 голос
/ 28 февраля 2020

Вы пропускаете 'deg' ('+ angle [current] +' deg) в CSS при назначении нового вращения CSS

Я изменил код только для правого поворота ( Я не изменил код для левого, может измениться как вправо), здесь см. Jsfiddle

Небольшой фрагмент, как показано ниже 

 $('#table1').css({
               ' -webkit-transform': 'rotate('+ angle[current]+' deg)',
                '-moz-transform': 'rotate('+ angle[current]+' deg)',
                '-o-transform': 'rotate('+ angle[current]+'deg)',
                 '-ms-transform': 'rotate('+ angle[current]+'deg)',
                  'transform': 'rotate('+ angle[current]+'deg)'}
    );

, и правый интервал держит его вне целевой div, поскольку он будет вращаться как основной div, вращается

...