不使用Hammerjs和角拖动可拖div

Question

在我的角度应用程序中，我有卡片和空间，me卡(Div)可以在桌面上很好地拖动和重新定位，我正在尝试使用锤子让它在移动上工作。

​

​

因此，我添加了一个(pan)事件处理程序，它被很好地激发了。

<div class="cardSpace" [ngClass]="debugStyle ? 'redBorder':''" [attr.id]="cardSpace.id" (click)="toggleCard()"
    [draggable]="!cardSpace.isEmpty" (dragstart)="drag($event)" (dragover)="allowDrop($event)" (drop)="drop($event)"
    (pan)="onPan($event)" [style.left.px]="left" [style.top.px]="top">
    <ng-container *ngIf="!cardSpace.isEmpty;">
        <img class="cardSize" [src]="getImagePath()">
    </ng-container>
</div>

下面是事件处理程序的逻辑

//mobile drag
onPan(event: any) {
    const elem = event.target;
    const el = new ElementRef(document.getElementById(this.cardSpace.id));

    if (!this.isDragging) {
      this.isDragging = true;

      this.lastPosX = 40;
      this.lastPosY = 80;
      /* did not work either
      if (el.nativeElement) {
        this.lastPosX = el.nativeElement.style.left;
        this.lastPosX = el.nativeElement.style.top;
      }
      */
      /* did not work 
      this.lastPosX = elem.offsetLeft;
      this.lastPosY = elem.offsetTop;
      */
    }

    // move our element to that position
    this.left = event.deltaX + this.lastPosX;
    this.top = event.deltaY + this.lastPosY;

    if (event.isFinal) {
      this.isDragging = false;
    }

    this.debugStyle = this.isDragging;
}

当我在手机上测试拖放时，卡边框在拖动开始时会变红(如预期的那样)，但是即使我正在更新用于定位元素的左/顶值，也不会移动卡(Div)。

卡片最初布局在一行(柔性容器)- https://gallant-agnesi-5c5b96.netlify.app/或矩阵(一列在另一行之上)。

<div class="cardRow">

    <div *ngFor="let cs of cardSpaces; let i = index">
        <ng-container *ngIf="hasHeaders">
            <div class="header">
                {{ headers[i] }}
            </div>
        </ng-container>
        <app-card-space-component [cardSpace]="cs" (dragStarted)="dragStarted($event)"
            (dragFinished)="dragFinished($event)"></app-card-space-component>
    </div>
</div>

我是否需要“浮动”我的div，使其不受cardRow的限制？我在这里做错了什么？

参考文献：

• https://codepen.io/bladnman/pen/LEWYYN
• https://embed.plnkr.co/vcD5EX/

另外，我正在寻找一种在移动环境中进行调试的方法，因为console.log错误在那里并不是很有用。

Answer 1

之所以没有拖动div，是因为display没有被设置为absolute，以便允许移出其容器之外。

因此，将此样式添加到div中，使其浮动。

.redBorder {
    border: 1px red solid; //only for debug purposes
    position: absolute; //<---- this was the solution
}

当拖动开始时，我将标志设置为可拖动(位置:绝对)，当拖动结束时，我会删除该样式。

onPan(event: any) {
    const elem = event.target;

    if (!this.isDragging) {
      this.isDragging = true;

      this.lastPosX = elem.offsetLeft;
      this.lastPosY = elem.offsetTop;
    }

    // move our element to that position
    this.left = event.deltaX + this.lastPosX;
    this.top = event.deltaY + this.lastPosY;

    if (event.isFinal) {
      this.isDragging = false;
    }

    this.debugStyle = this.isDragging;
}