Angular cdk/drag-drop — Drag horizontally

Question

I am using cdk/drag-drop to drag the images, however it does not change in the correct positions:( I have already tested vertically and it works perfectly, but horizontally it is not working, maybe it is cdk/drag-drop bug:( Does anyone know how I can solve this?

My code Stackblitz

Component.ts

files:any;

  urls = new Array<string>();
  detectFiles(event) {

    var self = this;
    this.files = event.target.files;
    if (this.files.length < 8) {
      for (let index = 0; index < this.files.length; index++) {

        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(this.files[index]);
      }
    }
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.urls, event.previousIndex, event.currentIndex);
  }

  dropBig(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.urls, event.previousIndex, 0);
  }

Answer 1

The result is weird but you can use cdkDropList cdkDropListOrientation="horizontal" to use the horizontal drag and drop.

But you are mixing Horizontal drag and drop with the bottom images, And vertical drag and drop with the main image and the bottom images.