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



问题是,当我尝试拖动旋转的元素时,它会反弹...... 我无法找出元素上发生了什么。

如果元素未旋转,它将正确移动。我还在可拖动上使用"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>

这些用于原型工具,并在元素上使用"可拖动、可调整大小、可旋转">

我一直在尝试解决问题,这篇文章给我带来了答案

[jQuery UI 可拖动 + CSS 变换导致"跳转">

最新更新