Предотвратить перетасовку предметов в cdkDrag - PullRequest
0 голосов
/ 13 марта 2020

Я пытаюсь создать файловую систему, подобную структуре для организации файлов и папок, для этого я реализую функцию перетаскивания с использованием cdkDrag и cdkDragList. я хочу перетащить файлы в папку, но когда я помещаю файл поверх или приближаю к папке, он смещается влево или вправо и освобождает место для файла. я хочу отключить поведение.

Это код для папки

   <app-folder
            [shAttachMenu]="menu"
            [shMenuData]="folder"
            class="folder"
            (folderAdded)="addNewFolder($event)"
            *ngFor="let folder of folders"
            [folderName]="folder.name"
            [folderId]="folder.id"
            [folderImage]="folder.icon"
            [folderSlug]="folder.slug"
            [snippetCount]="3"
            cdkDrag
            [cdkDragData]="folder"
            cdkDropList
            class="example-list"
            (cdkDropListDropped)="drop($event)"
          >
          </app-folder>

          <ng-container *ngIf="!fileView">
            <ng-container *ngFor="let file of files">
              <app-file
                [shAttachMenu]="menu"
                [shMenuData]="file"
                [fileName]="file.title"
                [snippet]="file"
                *ngIf="
                  !(isDragged && (draggedItem && file._id === draggedItem._id))
                "
                [dtsSelectItem]="file"
                class="item-draggable"
                cdkDrag
                cdkDropList
                (cdkDragStarted)="onDrag($event)"
                [cdkDragData]="file"
              >
              </app-file
            ></ng-container>
          </ng-container>

Когда я настраиваю стиль cdk-placeholder, я могу предотвратить это движение, указав отображение Свойство: none, но я хочу, чтобы оно отображалось.

.cdk-drag-placeholder {
  display: none;
}

Когда я перетаскиваю любые файлы, я хочу предотвратить перетасовку элементов.

enter image description here

...