Angular перетаскивание значков на холст - PullRequest
Новая
       3

Angular перетаскивание значков на холст

1 голос
/ 09 июля 2020

Мне нужна помощь с angular перетаскиванием. Как будто мне нужно перетащить значок на холст.

Я просмотрел много примеров, и это - тот пример, которого я достиг. когда я перетаскиваю этот объект, копия объекта должна быть перемещена. Я просмотрел много примеров, пожалуйста, помогите кому-нибудь.

1 Ответ

1 голос
/ 09 июля 2020

наши «поля» - это объект с текстом, сверху и слева. Итак, вы можете создать функцию 

changePosition(event:CdkDragEnd<any>,field)
  {
    console.log(field)
    field.top=+field.top.replace('px','')+event.distance.y+'px'
    field.left=+field.left.replace('px','')+event.distance.x+'px'
  }

И вы вызываете в. html

<div *ngFor="let field of fields;" cdkDrag (cdkDragEnded)="changePosition($event,field)"
          style="position:absolute;z-index:10" [style.top]="field.top" [style.left]="field.left">
                    {{field.text}}
            </div>

Обновлено проблема, поскольку Анантакришна сообщил мне, что что вы можете вытащить из «dop-зоны» один элемент в drop zone

Нам нужно использовать событие cdkDragDropped

<div *ngFor="let field of fields;" cdkDrag 
    (cdkDragDropped)="changePosition($event,field)"
     style="position:absolute;z-index:10" 
     [style.top]="field.top" 
     [style.left]="field.left">
        {{field.text}}
</div>

И в нашей функции changePosition «проверить», если это droppend внутри. Я использую getBoundingClientRect связанных элементов: 

changePosition(event:CdkDragDrop<any>,field)
  {
    
    const rectZone=this.dropZone.nativeElement.getBoundingClientRect()
    const rectElement=event.item.element.nativeElement.getBoundingClientRect()

    let top=+field.top.replace('px','')+event.distance.y
    let left=+field.left.replace('px','')+event.distance.x
    const out=top<0 || left<0 || 
              (top>(rectZone.height-rectElement.height)) || 
              (left>(rectZone.width-rectElement.width))
    if (!out) //If is inside
    {
       field.top=top+'px'
       field.left=left+'px'
    }
    else{ //we can do nothing
      this.fields=this.fields.filter(x=>x!=field) //or eliminate the object
    }
  }

См. Разветвленный stackblitz

...