cdkDragPreview and cdkDragPlaceholder not working as expected with horizontal elements

Question

I'm using display-inline in my elements as I want them to lay out horizontally instead of vertically as they do in most of the Angular examples. That said, the CSS behaves very weird. I'm specifically having two issues.

1. When I click an element to drag it, it grows (shrinks back to regular size after dropped). I'm not sure exactly why this happens but it is definitely not desired. I've tried numerous things to fix this via both css and adding a cdkDragPreview element with matchSize present (this seems to be the method Angular recommends). All of those efforts failed. I came across the following bug report that seems similar to my issue: https://github.com/angular/components/issues/19060. I noted that the bug was closed, so I don't know if that means it has been fixed.
2. When I start to drag an element from the bottom drop list, the remaining items move around sporadically while that element is still in the drop list (when it goes out of the bottom drop list they behave as I would expect them to). I created a hide style for the cdkDragPlaceholder as this seems to be how Angular provides control of this but it only helped with the top drop lists and seemed to have no effect on the bottom.

Here is a link that illustrates both issues on StackBlitz: https://stackblitz.com/edit/spuzzler. I'm guessing that my issue can be fixed with CSS, but I can't figure out how.

Answer 1

Create a cdkDropList for each word. My idea is to have an outer div and an inner div that is really the element that is dragged. More over, I fixed the size of the outer div. So, when you drag, there's no re-order of the words (simply leaves an empty space instead of the word you drag)

You can see the result in this stackblitz

<div #contenedor class="categories" cdkDropListGroup> 
    <ng-container *ngFor="let item of items;let i=index">
        <div class="categories-item" cdkDropList 
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="{item:item,index:i}" (cdkDropListDropped)="drop($event)" >
            <div class="inner"  cdkDrag>
        <div *cdkDragPlaceholder></div>
        <div class="categories-item-drag" *cdkDragPreview matchSize="true" >
          <div class="inner">{{item}}</div>
        </div>
        {{item}}
        </div>
        </div>
    </ng-container>
</div>

I use an observable that returns an array or words. In subscribe I equal to item and, using a setTimeout() add the size to the outter div

export class AppComponent implements OnInit {
  @ViewChildren(CdkDropList, { read: ElementRef }) pills: QueryList<ElementRef>;
  constructor(private renderer: Renderer2) {}
  items: any[];
  positions: any[];
  ngOnInit() {
    this.getParragraf().subscribe(res => {
      this.items = res;
      setTimeout(() => {
        this.pills.forEach(x => {
          this.renderer.setStyle(
            x.nativeElement,
            "width",
            x.nativeElement.getBoundingClientRect().width + "px"
          );
        });
      });
    });
  }

  drop(event: CdkDragDrop<any>) {
    this.items.splice(event.previousContainer.data.index, 1);
    this.items.splice(event.container.data.index,0,event.previousContainer.data.item)
    /* if we want to interchange the words, replace the two lines by*/
    //this.items[event.previousContainer.data.index]=event.container.data.item
    //this.items[event.container.data.index]=event.previousContainer.data.item
    //event.currentIndex=0;
    

  }

  getParragraf() {
    return of(
      "Let him who walks in the dark, who has no light, trust in the name of the Lord and rely on his God.".split(
        " "
      )
    );
  }
}

Updated Really you needn't make a cdkDropListGroup, you can take advantage of [cdkDropListConnectedTo]. For this, you have two arrays: words and items

if res is an array of strings, you can have

  this.items = res.map((x,index)=>({value:x,ok:false,id:'id'+index}));
  this.words=res.map(x=>({o:Math.random(),value:x}))
             .sort((a,b)=>a.o-b.o)
             .map(x=>(
               {value:x.value,
               connected:this.items.filter(w=>x.value==w.value).map(x=>x.id)
               }))

and use item.value,item.id and word.value,word.connected

See a new stackblitz