Question

我有3个连续的框，这些框使用flex进行布局，并且在它们下面有一个表格，并且正在使用ng2-dnd来实现拖放功能。

当我尝试将表格中的任何元素拖到第二个或第三个框中时，它只是停留在第一个框中，但是我悬停在第二个或第三个框中上方。即使我将一个或两个元素放在第一个框中，添加的其他任何元素都将转到第一个框中。

但是，奇怪的是，当我在第一个框中添加足够多的元素以使其大小有所扩展时（同时，第二个和第三个盒子也共享相同的CSS类），我能够将元素移到第二个框，无论是在表格中还是在第一个框中。

此外，它不允许我清空第一个框并将所有元素转移到第二个框。当剩下一个元素时，它只是拒绝放入第二个框中。

我一直试图缩小问题范围，但无济于事。任何帮助将不胜感激。

HTML

<div class="wrapper">
<div fxLayout="row">
<div class="flex" fxLayout="row" dnd-sortable-container [sortableData]="dataY1" [dropZones]="['y2', 'trend']" >

  <div fxFlex="33%" class="container" id="Y1" (onDropSuccess)="restrictedDrop1=$event">
    <div fxLayout="row wrap" fxLayout.xs="column" class="minHeight">
      <div fxFlex="48%" *ngFor="let y1 of dataY1; let i=index;" dnd-sortable [sortableIndex]="i" [dragEnabled]="true" class="things" [dragData]="[y1, 'Y1']" (onDropSuccess)="doSomething($event)" (onDragEnter)="highlightMe=true">
       <div class="breakWord">{{ y1.label }}</div>
      </div>        
    </div>
  </div>
  <div fxFlex="33%" dnd-sortable-container [sortableData]="dataY2" [dropZones]="['y2', 'trend']" class="container" id="Y2"  (onDropSuccess)="restrictedDrop2=$event">
    <div fxLayout="row wrap" fxLayout.xs="column" class="minHeight">
      <div fxFlex="48%" *ngFor="let y2 of dataY2; let j= index;" dnd-sortable [sortableIndex]="j" [dragEnabled]="true" [dragData]="[y2, 'Y2']" class="things" (onDropSuccess)="doSomething($event)" (onDragEnter)="highlightMe=true">
        <div class="breakWord">{{ y2.label }}</div>
      </div>
    </div>
  </div>

  <div fxFlex="33%" class="container trend" dnd-droppable [dropZones]="['trend']" id="trend" (onDropSuccess)="doSomeOtherThing($event)">
    <div fxLayout="row wrap" fxLayout.xs="column" class="minHeight">
      <div fxFlex="48%" *ngFor="let t of trend; let i=index;" [dragEnabled]="false" class="things">
        <div>
          <span>{{ t.label }}</span>
          <span fxFlex></span>
          <span (click)="doSomething(t)"><mat-icon>close</mat-icon></span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="flex">
  <div class="container mat-elevation-z8" dnd-droppable [dropZones]="['allthings']" id="allthings">
    <!-- Using Material Table for the table -->
    <div #TABLE>
      <mat-table #table dnd-sortable-container [sortableData]="dataSource?.filteredData" [dropZones]="['y2']" [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef class="green bolder align">#</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index;" class="align">{{ i+1 }}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="label">
          <mat-header-cell *matHeaderCellDef mat-sort-header class="green bolder customWidth">NAME</mat-header-cell>
          <mat-cell *matCellDef="let row" class="customWidth">{{ row.label }}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="desc">
          <mat-header-cell *matHeaderCellDef mat-sort-header class="green bolder">DESCRIPTION</mat-header-cell>
          <mat-cell *matCellDef="let row">{{ row.desc }}</mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" dnd-sortable [sortableIndex]="i + pageIndex * pageSize" [dragEnabled]="true" [dropZones]="['y1', 'y2']" class="element flex" (onDropSuccess)="doSomething($event)" (onDragEnter)="highlightMe=true"></mat-row>
      </mat-table>
      <mat-paginator #paginator [pageSize]="pageSize" [pageIndex]="pageIndex" [pageSizeOptions]="[5, 10, 25, 100]" [showFirstLastButtons]="true" (page)="onPaginateChange($event)"></mat-paginator>
    </div>
  </div>
</div>

CSS

.flex {
min-height: 40px;
/* display: flex; */
padding: 8px;
border: 1px #a2a2a2;
}

.container {
/* flex: 1; */
border-radius: 16px;
background: #fff;
box-shadow: 0 0 15px rgba(192,192,192,.75);
margin-bottom: 16px;
}

.container:not(:last-child) {
margin-right: 16px;
}

.wrapper {
padding: 4%;
/* background: rgba(255, 255, 255, 1); */
}

.background {
background: rgba(240, 240, 240, 1);
height: 100%
}

.heading {
text-align: center;
margin: 5%;
font-size: 40px;
font-weight: bolder;
}

.element {
padding: 10px;
border-bottom:solid 1px rgba(162, 162, 162, 0.4);
margin: 0px 0px 10px 0px;
}

.tableHeader {
padding: 10px;
margin: 0px 0px 10px 0px;
}

.things {
background: #00664E;
color:white;
border-radius: 10px;
padding: 10px;
margin: 0px 0px 5px 0px;
}
.things:not(:last-child) {
margin: 0px 5px 5px 0px;
}

.minHeight {
min-height: 40px;
min-width: 50%;
}

.trend {
word-break: break-all;
}

.green {
color: green;
}

.bolder {
font-weight: bolder;
}

.mat-table {
font-family: 'Roboto Condensed'
}

.breakWord {
word-break: break-all;
}

.customWidth {
flex: 0 0 30%;
}

.align {
visibility: visible;
}

Ng2-dnd怪异行为

0 个答案: