Drag and drop custom behavior

Question

I try to implement this behavior http://jsfiddle.net/Aneeshmohan/qbxfbmtt/ in angular 8. I use angular cdk drag-drop module https://stackblitz.com/edit/angular-4ppaey?file=s

Answer 1

Razvan, I know the cdkDrag is talking always about List, but you needn't use a list. if our "items" has as properties top and left, we can draw in his position.

You can have a drop zone like

    

           {{field.text}}
     

And a list

   

        {{type.text}}
        


    

In move we store the position of the pointer

  moved(event: CdkDragMove) {
    this._pointerPosition=event.pointerPosition;
  }

In dropped calculate the position

  itemDropped(event: CdkDragDrop) {
    if (event.previousContainer === event.container) {
      moveItemInArray(this.fields, event.previousIndex, event.currentIndex);
    } else {
      event.item.data.top=(this._pointerPosition.y-this.dropZone.nativeElement.getBoundingClientRect().top)+'px'
      event.item.data.left=(this._pointerPosition.x-this.dropZone.nativeElement.getBoundingClientRect().left)+'px'
      this.addField({...event.item.data}, event.currentIndex);
    }
  }

see the stackblitz

For "don't desapear" I think that the only way is make a "fixed copy" behind the drag zone, some like this another answer in SO