html - 如何创建动态拖放占位符（HTML 或角度 CDK）

Question

有谁知道如何使用 HTML 或角度 CDK 库创建动态占位符？

我尝试过使用 CDK 库，但无法获得合适的占位符。

如果我使用一些静态 div，那么我的布局会中断，而拖动只需要创建一些动态 div 或某种占位符。

目前，我正在拖动另一个 div 的 div 顶部，但预期的右框应仅向左移动，底部和左侧框应仅向右和底部移动。

<div
    class="drag-container col-xs-12 col-sm-6 {{
      container.id
    }} p-1"
    style="cursor: grab"
    [attr.key]="rowIndex"
    (dragstart)="onRowDrag($event, rowIndex, container.supports)"
    (drop)="onRowDrop($event, rowIndex, container.supports, nodeIndex)"
    (dragover)="onRowDragOver($event)"
    (dragenter)="onRowDragEnter($event, rowIndex, container.supports)"
    (dragleave)="onRowDragLeave($event)"
    [draggable]="rowDrag"
    >
    <ng-container
      *ngFor="let colValue of container.supports; let colIndex = index"
    >
      <div
        class="p-2 col"
        [attr.key]="colIndex"
        (drop)="
          onColDrop($event, rowIndex, colIndex, colValue, nodeIndex)
        "
        (dragover)="onColDragOver($event)"
        (dragleave)="onColDragLeave($event)"
        (dragstart)="
          onColDragStart($event, rowIndex, colIndex, colValue)
        "
        (dragenter)="
          onColDragEnter($event, rowIndex, colIndex, colValue)
        "
        [draggable]="columnDrag"
      >
        <app-component [type]="colValue"></app-component>
      </div>
    </ng-container>
</div>

ts.文件

onColDragStart(evt: any, rowIndex: any, colIndex: any, colValue: any) {
    this.columnDragValue = { rowIndex, colIndex, colValue };
    this.rowDrag = false;
  }

onColDrop(
    e: any,
    rowIndex: any,
    colIndex: any,
    colValue: any,
    nodeIndex: any
  ) {
    const {
      rowIndex: startRowIndex,
      colIndex: startColIndex,
      colValue: columnValue,
    } = this.columnDragValue;
    const data = this.templateData;
    if (typeof startRowIndex != "undefined" && typeof rowIndex != "undefined") {
      if (startRowIndex === rowIndex) {
        data.nodes[nodeIndex].containers[rowIndex].supports[colIndex] =
          columnValue;
        data.nodes[nodeIndex].containers[startRowIndex].supports[
          startColIndex
        ] = colValue;
        this.containerService.initState(data);
      }
      if (startRowIndex !== rowIndex) {
        data.nodes[nodeIndex].containers[rowIndex].supports.splice(
          colIndex,
          0,
          columnValue
        );
        data.nodes[nodeIndex].containers[startRowIndex].supports.splice(
          startColIndex,
          1
        );
        if (!data.nodes[nodeIndex].containers[startRowIndex].supports.length) {
          data.nodes[nodeIndex].containers.splice(startRowIndex, 1);
        }
        this.containerService.initState(data);
      }
    }
    e.target.classList.remove("dragEnter");
    this.rowDrag = true;
    this.columnDrag = true;
    this.columnDragValue = {};
    this.rowDragValue = {};
    e.preventDefault();
    e.stopPropagation();
  }

  onColDragEnter(e: any, rowIndex: any, colIndex: any, colValue: any) {
    e.target.classList.add("dragEnter");
    e.preventDefault();
    e.stopPropagation();
  }

  onColDragOver(ev: any) {
    ev.preventDefault();
  }

  onColDragLeave(ev: any) {
    ev.target.classList.remove("dragEnter");
    ev.preventDefault();
    this.rowDrag = true;
    this.columnDrag = true;
  }

  onRowDragOver(ev: any) {
    ev.preventDefault();
  }

  onRowDragEnter(e: any, rowIndex: any, rowValues: any) {
    e.target.classList.add("dragRowEnter");
    e.preventDefault();
    e.stopPropagation();
  }

  onRowDragLeave(ev: any) {
    ev.target.classList.remove("dragRowEnter");
    ev.preventDefault();
    this.rowDrag = true;
    this.columnDrag = true;
  }

  onRowDrag(e: any, rowIndex: any, rowValues: any) {
    this.rowDragValue = { rowIndex, rowValues };
    this.columnDrag = false;
  }

  onRowDrop(e: any, rowIndex: any, rowValues: any, nodeIndex: any) {
    this.columnDrag = true;
    const { rowIndex: startRowIndex, rowValues: value } = this.rowDragValue;
    if (
      typeof rowIndex != "undefined" &&
      typeof startRowIndex != "undefined" &&
      startRowIndex !== rowIndex
    ) {
      const data = this.templateData;
      data.nodes[nodeIndex].containers[rowIndex].supports = value;
      data.nodes[nodeIndex].containers[startRowIndex].supports = rowValues;
      this.containerService.initState(data);
    }
    e.target.classList.remove("dragRowEnter");
    this.rowDragValue = {};
    this.columnDragValue = {};
    e.preventDefault();
    e.stopPropagation();
}

预期的用户界面

标签： htmldrag-and-dropdraggableangular-cdk-drag-drophtml5-draggable