Блог

Я использую перетаскивание внутри диалогового окна Материала.

  <div mat-dialog-content>
    <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let movie of movies" cdkDrag>
        {{movie.title}}
        <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
      </div>
    </div>
 </div mat-dialog-content>
  

Я использую этот пример для перетаскивания

Итак, когда я перетаскиваю элемент, я вижу, что drop() метод работает:

   drop(event: CdkDragDrop<string[]>) {
        // if (event.previousContainer === event.container) {
        console.log('It works');
        moveItemInArray(this.items, event.previousIndex, event.currentIndex);
        //}
    }
  

Но элемент не перемещен, и нет свободного места, куда элемент можно было бы отбросить.
Я предполагаю, что проблема в слоях CSS или некоторых перехватчиках JS, как ее отладить, если нет никаких предупреждений и ошибок. Это работает не только в диалоговом окне, но и в других местах (за пределами диалогового окна).

Возможно, этот диалог CSS допускает ошибки:

 .cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 10000;
}
  

Добавление следующего к cdkDrag элементам помогло мне:

 [cdkDragPreviewContainer]="'parent'"
      [cdkDragPreviewClass]="'add-padding-to-dragged'"
  

И в styles.scss добавьте исправления к стилям по мере необходимости:

 .add-padding-to-dragged{
   padding: 30px; // Any other style fixes needed.
}
  

Это рабочий пример:

 .drag-drop {
    cursor: move;
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
            0 8px 10px 1px rgba(0, 0, 0, 0.14),
            0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
  

Надеюсь, это может вам помочь.