Баг с перевернутым элементом при передвижении и изменении размера

Question

Есть HTML элемент, который повернут, например на 45 градусов

.element {
    transform: rotate(45deg);
}

И надо чтобы с помощью JqueryUI его можно было передвигать (draggable) и изменять размер (resizable)

$(".element").draggable().resizable();

Если элемент не повернут, то все прекрасно работает, но если его повернуть, то объект начинает скакать. От скачков нужно избавиться.

Answer 1

При transform: rotate все нормально работает посмотрите пример:

$(".element").draggable().resizable();

.element {
  width: 200px;
  height: 200px;
  background-color: grey;
  transform: rotate(45deg);
}
.element--norotate{
  transform: unset;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
 <div class="element"></div><div class="element element--norotate"></div>

Добавьте код который воспроизводит проблему или уточните как воспроизвести "скакание" объекта

БЛОГ НА HUSL

Баг с перевернутым элементом при передвижении и изменении размера

Ответы (1 шт):