Free Drag with cdkDropList

Question

I'm working on a project where I need to implement some sort of drop zone where you can drag element from a list, then drop them in a zone where they can be dragged freely. I also would like to use a cdkDropList for the zone, because it provides all the tools for connecting lists. I used this example as a reference for my implementation, but I am not able to make it work right.

When I drop an item in the zone, it does not drop where the cursor was, it just goes to the top left of my zone, like it was in a list.

When I drag an item in the zone, it either drags correctly to where I want it to be dropped, gets dropped near the drop point, or just goes back to the top left.

Here is my cdkDrag element, it differs from the example linked above because I absolutely need it to be in it's own component (I would like to apply some logic to it in the future), but it is essentially the same concept (cdkDrag div in cdkDropList div). I managed to route all the needed events to the parent element (the zone) using Outputs.


    {{object_name}}

Here is the logic for the drag element:

export class ElementBoxComponent implements OnInit {

  @Input () object_name: string;
  @Input () boundary_name: string;
  @Input () itemSelf: any;

  @Output () dragMovedEvent = new EventEmitter();
  @Output () dragStartedEvent = new EventEmitter();
  @Output () dragDroppedEvent = new EventEmitter();

  constructor() {}

  ngOnInit(): void {
  }

  dragMovedEventToParent(event: CdkDragMove) {
    this.dragMovedEvent.emit(event);
  }

  dragStartedEventToParent(event: CdkDragStart){
    this.dragStartedEvent.emit(event);
  }

  dragDroppedEventToParent(event: CdkDragEnd){
    this.dragDroppedEvent.emit({event, "self": this.itemSelf});
  }
}

Here is my drop zone element, where I render the drag elements (you can see that I routed the Outputs to methods in my logic for the zone):

And here are the relevant methods in the TS file for my drop zone:

itemDropped(event: CdkDragDrop) {
    if (event.previousContainer === event.container) {
      moveItemInArray(this.itemsInBoard, event.previousIndex, event.currentIndex);
    } else {
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      )
    }
}

changePosition(event: CdkDragDrop, field) {
    const rectZone = this.dropZone.nativeElement.getBoundingClientRect();
    const rectElement = event.item.element.nativeElement.getBoundingClientRect();
    const top = rectElement.top + event.distance.y - rectZone.top;
    const left = rectElement.left + event.distance.x - rectZone.left;

    const out = (top < 0) || (left < 0) || (top > (rectZone.height - rectElement.height)) || (left > (rectZone.width - rectElement.width));
    if (!out) {
      event.item.element.nativeElement.style.top = top + 'px';
      event.item.element.nativeElement.style.left = left + 'px';
    } else {
      this.itemsInBoard = this.itemsInBoard.filter((x) => x != event.item);
    }
}

Again, the only differences are that my elements are encapsulated in their own components, and that the way I access the top and left style elements of the components are different (the code in the example did not work). I know that the problem is the way I calculate the top and left variable, but I've been stuck on this for a week and cannot seem to find out what's wrong with it.

Here is a short demonstrative video if you want to better visualize what I am talking about.

Does anyone know what could be wrong with this ? I am open to any suggestions, thank you :)

Eliseo · Accepted Answer

It's difficut without a stackblitz know what is wrong

In this stackblitz I made two ckd-list

One cdkDropList (todoList) it's a typical "list", the other one is a dropZone (doneList). My elements are in the way

{label:string,x:number,y:number,'z-index':number}

The cdkDrag in the dropZone is in the way

I choose that the todoList is connected to the dropZone, but the dropZone is not connected to anything. When I mover the elements of the dropZone if it's move away this one, simply add to the list

We need get the doneList as ElementRef

  @ViewChild('doneList',{read:ElementRef,static:true}) dropZone:ElementRef;

And the neccesary functions

  drop(event: CdkDragDrop) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex,
      );
      event.item.data.y=(this._pointerPosition.y-this.dropZone.nativeElement.getBoundingClientRect().top)
      event.item.data.x=(this._pointerPosition.x-this.dropZone.nativeElement.getBoundingClientRect().left)
      this.changeZIndex(event.item.data)
    }
    this.posInside={source:null,x:0,y:0}
  }

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

  changeZIndex(item:any)
  {
    this.done.forEach(x=>x['z-index']=(x==item?1:0))
  }
  changePosition(event:CdkDragDrop,field)
  {
    const rectZone=this.dropZone.nativeElement.getBoundingClientRect()
    const rectElement=event.item.element.nativeElement.getBoundingClientRect()

    let y=+field.y+event.distance.y
    let x=+field.x+event.distance.x
    const out=y<0 || x<0 || (y>(rectZone.height-rectElement.height)) || (x>(rectZone.width-rectElement.width))
    
    if (!out)
    {
       field.y=y
       field.x=x
    }
    else{
      this.todo.push(field)
      this.done=this.done.filter(x=>x!=field)
    }
  }

The .html like


  
    
      {{ item.label }}
      
    
  
  
    
      
        {{ item.label }}

Free Drag with cdkDropList

Answers (1)

Related Questions