Исправить направление мыши перетаскиваемого div внутри повернутого родителя

Question

Пожалуйста, посмотрите на мой jsfiddle, чтобы понять мою проблему: желтый - это родительский div, который вы можете вращать, используя красный кружок, он также перетаскивается, внутри этого div есть еще один div с черной рамкой, который мы могли бы рассматривать как содержимое на синий круг. Синий круг можно перетаскивать в пределах границ локализации, координата y больше ничего не требуется, проблема возникает, если вы поворачиваете желтый div ex; 90 градусов или больше, координаты мыши не соответствуют ожидаемой позиции перетаскивания, я пытался решить проблему с помощью тригонометрии и изменения оси, но это напрасно, я надеюсь, что кто-то может решить эту проблему и оставить jsfiddle для работы образец высоко ценится. "Пожалуйста, не направляйте меня на другие посты, так как я думаю, что прочитал все, что связано с этой проблемой"

HTML

<div id="container">
  <div id="containment">
    <div id="circle"></div>
  </div>
</div>

CSS

#container{width:100px;
       height:140px;
       background:#FFEB3B;
       position:absolute;
       top:50%;
       bottom:50%;
       margin-top:-70px;
       margin-right:-50px}

.ui-rotatable-handle {
        height: 30px;
        width: 30px;
        cursor: pointer;
        background:#ff0000;
        border-radius:50%;
        right: -15px;
        bottom: -15px;
        position:absolute;
        z-index:1}

#containment{width:30px;
         height:190px;
         position:absolute;
         bottom:70px;
         left:35px;
         border:solid 1px #000}

#circle{width:30px;
         height:30px;
         position:absolute;
         top:0;
         left:0;
         border-radius:50%;
         background:#3F51B5}             

JavaScript

$(function(){
            $('#container').draggable().rotatable();
            $('#circle').draggable({containment: $('#containment')
            });
          });

Answer 1

Only way I found it's to add "fake" rectangle and show it on needed degrees. I added only 1 fake rectangle for 45deg+ but you can also add other 2 by same logic for 90deg+ and 115deg+. See solution there.

HTML

      <div id="container">
  <div id="containment">
    <div id="circle" class="circle"></div>
  </div>
  <div id="containment2">
    <div id="circle2" class="circle">
      
    </div>
  </div>
</div>

CSS

      #container {
  width: 100px;
  height: 140px;
  background: #FFEB3B;
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin-top: -70px;
  margin-right: -50px;
}

.ui-rotatable-handle {
  height: 30px;
  width: 30px;
  cursor: pointer;
  background: #ff0000;
  border-radius: 50%;
  right: -15px;
  bottom: -15px;
  position: absolute;
  z-index: 1;
}

#containment,
#containment2 {
  width: 30px;
  height: 190px;
  position: absolute;
  bottom: 70px;
  left: 35px;
  border: solid 1px #000
}

#containment2 {
  width: 190px;
  height: 30px;
  left: 51px;
  bottom: 54px;
  transform: rotate(-90deg);
  border: solid 1px green;
  transform-origin: left;
  display: none;
}

.circle {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #3F51B5;
  z-index: 10;
}

#circle2 {
  left: calc(100% - 30px);
  display: none;
}

#wrapper {
  width: 100%;
  height: 100%;
  outline: 1px solid red;
}

JavaScript

      $(function() {
  var Pi = 3.14;
  $('#container').draggable({}).rotatable({
    rotate: function(event, ui) {
      let deg = ui.angle.current * 180 / Pi;
      $("#containment").show();
      $("#containment2").hide();
      $("#circle").show();
      $("#circle2").hide();
      if (deg > 45) {
        $("#containment").hide();
        $("#containment2").show();
        $("#circle").hide();
        $("#circle2").show();
      }
    },
  });

  $('#circle').draggable({
    stop: function(event, ui) {
        console.log(ui.position.top);
        $("#circle2").css("inset", ui.position.left + "px auto auto " + (160 - ui.position.top) + "px");
    },
    containment: $('#containment')
  });
  $('#circle2').draggable({
    stop: function(event, ui) {
        $("#circle").css("inset", 160 - ui.position.left + "px auto auto " + ui.position.top + "px");
    },
    containment: $('#containment2')
  });
  
});

Answer 2

У меня были похожие проблемы с JQuery внутри приложения rtl. причина заключалась в том, что, поскольку ориентация макета использует left css позиционирование - right отсутствовал, и расчеты пошли не так.

Добавление их при создании элемента решило эту проблему.