修复旋转父级内可拖动 div 的鼠标方向

Posted 2023-05-08

【中文标题】修复旋转父级内可拖动 div 的鼠标方向

【英文标题】：Fix mouse direction of a draggable div inside a rotated parent

【发布时间】：2016-07-23 05:04:31

【问题描述】：

请查看我的jsfiddle 以了解我的问题： 黄色是您可以使用红色圆圈旋转的父 div，它也是可拖动的，在此 div 内还有另一个带有黑色边框的 div，我们可以将其视为对蓝色圆圈的包含。 蓝色圆圈可在容器边界内拖动，仅需要 y 坐标即可，如果旋转黄色 div ex，则会出现问题； 90度或更多，鼠标坐标与预期的拖动位置不匹配，我试图通过使用三角函数和反转轴来解决这个问题，但它是徒劳的，我希望有人能解决这个问题并留下一个jsfiddle来工作样品受到高度赞赏。 '请不要将我引导至其他帖子，因为我认为我已阅读与此问题相关的所有内容'

html

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

CSS

#containerwidth: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

#containmentwidth:30px;
         height:190px;
         position:absolute;
         bottom:70px;
         left:35px;
         border:solid 1px #000

#circlewidth:30px;
         height:30px;
         position:absolute;
         top:0;
         left:0;
         border-radius:50%;
         background:#3F51B5             

javascript

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

【参考方案1】：

我发现它的唯一方法是添加“假”矩形并将其显示在所需的度数上。我只为 45deg+ 添加了 1 个假矩形，但您也可以通过相同的逻辑为 90deg+ 和 115deg+ 添加其他 2 个。见solution那里。

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')
  );
  
);

【参考方案2】：

我在 rtl 应用程序中遇到了一些与 JQuery 类似的问题。原因是由于布局的方向使用left css 定位 - 缺少right 并且计算出错了。

在创建元素时添加它们解决了它。