Angular Drag drop - 旋转元素时不向正确的方向拖动答案

【问题标题】：Angular Drag drop - not dragging in the right direction when element is rotatedAngular Drag drop - 旋转元素时不向正确的方向拖动
【发布时间】：2019-01-02 12:25:15
【问题描述】：

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

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

这里是 Reproduction Link

【问题讨论】：

标签： angular drag-and-drop angular-material2

【解决方案1】：

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

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

【讨论】：

谢谢，如果元素是矩形，它不会旋转元素
这是另一个要求。在帖子中提及所有需求和备用流程

【解决方案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

【讨论】：