web-dev-qa-db-ja.com

Angular Material 7ドラッグアンドドロップxおよびy座標

内部に要素を持つコンテナがあります。要素をコンテナー内の別の場所にドラッグして、新しいx座標とy座標を確認できるようにしたいと思います（x = 0とy = 0はコンテナーの左上隅です）。

https://stackblitz.com/edit/material-6-mjrhg1 で基本的なstackblitzを設定していますが、コンソールにイベントオブジェクト全体が表示されません（「オブジェクトが大きすぎます」） ）。実際のアプリケーションでは、イベントオブジェクト全体を見ることができますが、新しいxとyの位置を表すプロパティが見つかりません。

基本的なセットアップはこれです：

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

他のイベントもいくつか試しましたが、cdkDragEndedが最もわかりやすいでしょう。

Xおよびy座標を見つけるためにどのプロパティをチェックするか、または別のイベント/アプローチを使用する必要があるか？

drag-and-dropangular-materialangular-material-7
4
Tim

sourceイベントのCdkDragEndプロパティからドラッグされている要素にアクセスできます。

onDragEnded(event) {
  let element = event.source.getRootElement();
  let boundingClientRect = element.getBoundingClientRect();
  let parentPosition = this.getPosition(element);
  console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));        
}

getPosition(el) {
  let x = 0;
  let y = 0;
  while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: y, left: x };
}

移動する長方形のx座標とy座標を記録するように、stackblitzを変更しました here 。

移動する長方形が別の要素に含まれているという問題を解決するには、getPosition関数（ this stackoverflow postから取得）を使用して、上/左の値を取得します含んでいる要素のx/y座標を正しく計算できるようにします。

6
Fabian Küng