Javascript 角度拖放图标到画布

我需要帮助进行角度拖放。就像我需要把一个图标拖到画布上

我经历了许多例子，这就是我所达到的例子。当我拖动该对象时，应该移动该对象的副本。我看过很多例子，请大家帮忙。

我们的“字段”是带有文本的对象，顶部和左侧。因此，您可以创建一个函数

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'
  }

并且，在我们的函数转换位置“检查”中是否是droppend。我使用相关元素的GetBoundingClienter：

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
    }
  }

---

changePosition（event:CdkDragDrop
？@Eliseo根据您的建议，文本在框中时是固定的。如何更改该属性一旦放置，它可以再次替换到框中的另一个位置，但现在它可以从框中拖出，我不希望这样。我需要的是它应该在该框中，也可以放置在该框中的任何位置x、 从中可以看出，这正是我所需要的，但一旦物品被放进盒子里，它就会被锁定在它的位置上。我不想这样，你能理解我的意思吗？..@Ananthakrishna，对不起，延迟了，我更新了回复和堆栈列表。我希望这能帮助你注意：不要忘记
cdkDropListSortingDisabled=“true”
否则，当你移动一个掉落的项目时，所有项目都会变成移动随机数知道吗，我需要这个确切的项目，但即使我复制了stackbliz代码，结果中也没有确切的内容。这是因为任何角度版本吗？我的是角度9。请加入聊天。
<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(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
    }
  }