小编And*_*ler的帖子

请查看我的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')
            });
          });