1

I am using Angular 12 drag and drop to move a mat-list-item to "dropzone" (cdkDropList) in another component.

When I drag the item over the droplist, the droplist expands as if to make room for the item. Since this is not really a list, this behavior is undesirable. How can I stop it from expanding? enter image description here

        <mat-list-item
          cdkDrag
          [cdkDragDisabled]="!isDraggable"
          [cdkDragData]="r.id"
          (click)="selectRecord(r, i)"
          *ngFor="
            let r of recordList | filterList: searchText:filterField;
            let i = index">
          <p id="{{ 'Item-' + r.id }}" [innerHTML]="lineTitle(r)"
             matLine></p>
        </mat-list-item>

            <div
              (cdkDropListDropped)="svc.dropSub1($event)"
              *ngIf="!svc.sub1"
              cdkDropList
              class="drag-here-column text-center"
              style="border: 1px grey dotted; line-height: 300px; font-size: smaller; font-style: italic;">
              Drag preferred subject here
            </div>
ed4becky
  • 1,488
  • 1
  • 17
  • 54

2 Answers2

0

I tried to used dragula but although is easier to configure I ended up having the same issue, where dragula will just add more elements when the destination is full and changing that behaviour was not obvious to me

After searching in many places about how to avoid cdkDropList from autoexpading or growing, I ended up doing a custom drag/drop approach, especially because I need to have placeholders as destination of my objects.

Is really useful to set HTML IDs to each element that is going to be dragged, in this way you can recognize origin and destination based on those id (for example concatenating a prefix of the container with the position ('contA_1','contB_9')

Here is one basic example that once you understand can help you setup your drag/drop event handlers and how to update the model to reflect the drop operation

https://idkblogs.com/angular2/2/Implement-Drag-and-Drop-in-Angular-2-4-5-6

Mauricio Gracia Gutierrez
  • 10,288
  • 6
  • 68
  • 99
0

try this

You can add a CSS rule to the .cdk-drag-placeholder class like this

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

Note: This will affect the list you are draggin it from too, so you might want to get more specific to the container you are dropping it into

from

How to disable element shifting/moving in target cdkDropList in Angular 7

Om Om
  • 1