Угловое перетаскивание - не перетаскивание в правильном направлении при повороте элемента

Question

Когда элемент вращается с использованием transform:rotate(90deg), и когда я перетаскиваю элемент, он не перетаскивается в правильном направлении.

Я использую угловое перетаскивание материала cdk.

Здесьявляется ссылкой для воспроизведения

Answer 1

.directive('dragg', function($document) {
  return function($scope, $element, $attr) {
    var startX = 0,
      startY = 0;

    var newElement = angular.element('<div class="dragdrop"></div>');

    $element.append(newElement);
    newElement.on('mousedown', function($event) {
      event.preventDefault();

      // To keep the last selected box in front
      angular.element(document.querySelectorAll('.contentBox')).css('z-index', '1');
      $element.css('z-index', '2');

      startX = $event.pageX - $element[0].offsetLeft;
      startY = $event.pageY - $element[0].offsetTop;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove($event) {
      placeNode( $element , $event.pageY - startY , $event.pageX - startX, $element);
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  };
});

Плункер

Answer 2

Используйте cdkDrag и transformation на другом уровне. Попробуйте это

<div class="example-box" cdkDrag>
  <div style="transform:rotate(90deg)">
      Drag me around
  </div>
</div>