0

The problem is, when I try to drag an element which is rotated it bounces up... I can't find out what happens on the element.

If the element isn't rotated, it moves properly. I've also used 'cursorAt' attribute on draggable but I can't still find out the problem.

Here's my code

$(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>

These are for the prototyping tool and using 'draggable, resizable, rotatable' on the element

Twisty
  • 30,304
  • 2
  • 26
  • 45
kwanikJang
  • 21
  • 4
  • Welcome to Stack Overflow. Your question is very similar to a few others. Take a look: https://stackoverflow.com/questions/50973609/input-text-field-draggable-resizable-not-working/ – Twisty Nov 21 '19 at 02:18
  • Thank you for your reply. I watched your cool answer on other question but I can't still solve the problem... – kwanikJang Nov 21 '19 at 05:17

1 Answers1

0

I've keep tried to solve the problem and this post brought me answer

[jQuery UI Draggable + CSS Transform Causes "Jumping"

kwanikJang
  • 21
  • 4