Jquery UI - 在旋转元素上拖动时出现问题

Question

问题是，当我尝试拖动一个旋转的元素时，它会弹起...... 我不知道元素上发生了什么。

如果元素没有旋转，它会正确移动。我还在可拖动对象上使用了“cursorAt”属性，但我仍然无法找出问题所在。

这是我的代码

$(function(){
    $('.obj-rect').resizable({
        handles:{
            'n': '.ui-resizable-n',  
            'e': '.ui-resizable-e',  
            's': '.ui-resizable-s',  
            'w': '.ui-resizable-w',  
            'ne': '.ui-resizable-ne',  
            'se': '.ui-resizable-se',  
            'sw': '.ui-resizable-sw',  
            'nw': '.ui-resizable-nw',  
        },
        alsoResize: ".textarea"
    }).draggable().rotatable();
});

/* Resizable Test */
.obj-rect{
    position: absolute;
    width: 120px;
    height: 80px;
    background: transparent;
    border: 1px solid #000;
}
.ui-resizable-handle{
    position: absolute;
    background-color: #fff;
    width: 8px;
    height: 8px;
    border: 1px solid #00a8ff;
}
.ui-resizable-helper { 
    border: 1px dotted #00F;
}
.ui-resizable-n{
    top: -9px;
    left: calc(50% - 9px);
}
.ui-resizable-e{
    right: -9px;
    top: calc(50% - 9px);
}
.ui-resizable-s{
    bottom: -9px;
    left: calc(50% - 9px);
}
.ui-resizable-w{
    top: calc(50% - 9px);
    left: -9px;
}
.ui-resizable-ne{
    top: -9px;
    right: -9px;
}
.ui-resizable-se{
    bottom: -9px;
    right: -9px;
}
.ui-resizable-nw{
    top: -9px;
    left: -9px;
}
.ui-resizable-sw{
    bottom: -9px;
    left: -9px;
}
.ui-rotatable-handle {
    background: url("https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/rotate.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 16px;
    width: 16px;
    position: absolute;
    top: -30px;
    left: calc(50% - 12px);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1.1/jquery.ui.rotatable.min.js"></script>
<div class="obj-rect">
      <div class="textarea"></div>
      <div class="ui-resizable-handle ui-resizable-n"></div>
      <div class="ui-resizable-handle ui-resizable-e"></div>
      <div class="ui-resizable-handle ui-resizable-s"></div>
      <div class="ui-resizable-handle ui-resizable-w"></div>

      <div class="ui-resizable-handle ui-resizable-ne"></div>
      <div class="ui-resizable-handle ui-resizable-se"></div>
      <div class="ui-resizable-handle ui-resizable-sw"></div>
      <div class="ui-resizable-handle ui-resizable-nw"></div>
  </div>

这些用于原型制作工具并在元素上使用“可拖动、可调整大小、可旋转”

Answer 1

我一直在努力解决这个问题，这篇文章给我带来了答案

[jQuery UI Draggable + CSS Transform Causes "Jumping"