角度拖动 - 在旋转元素时不向右拖动

Question

当使用transform:rotate(90deg)旋转元素时，当我拖动元素时，它不会向正确的方向拖动。

我正在使用角度材料拖放cdk。

这是Reproduction Link

Answer 1

在不同的级别使用cdkDrag和transformation。试试这个

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

Answer 2

.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);
    }
  };
});

Plunker