CODEWITHSUNDEEP
angulardrag-and-dropangular-material2
Borad Akash
Borad Akash

Reputation: 804

Angular Drag drop - not dragging in the right direction when element is rotated

When the element is rotated using transform:rotate(90deg) and when I am dragging the element it's not dragging in the right direction.

I am using angular material drag and drop cdk.

Here is the Reproduction Link

enter image description here

Upvotes: 0

Views: 927

Answers (2)

Mikhail Malakhvei
Mikhail Malakhvei

Reputation: 117

.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

Upvotes: 0

Parshwa Shah
Parshwa Shah

Reputation: 341

Use cdkDrag and transformation at different level. Try this

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

Upvotes: 1

Related Questions