角度拖放图标到画布

Question

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

我已经通过了许多例子，这是我所做的例子。当我拖动那个对象时，对象的副本应该被移动。我看了很多例子，请大家帮忙。

Answer 1

使用ng dnd很容易实现您的目标。您可以检查示例并尝试一下。

<div [dragSource]="source">
  drag me
</div>

constructor(private dnd: DndService) { }

source = this.dnd.dragSource("DRAGME", {
  beginDrag: () => ({ name: 'Jones McFly' }),
  // other DragSourceSpec methods
});

<div [dropTarget]="target">
  drop on me
</div>

constructor(private dnd: DndService) { }

target = this.dnd.dropTarget("DRAGME", {
  drop: monitor => {
    console.log('dropped an item:', monitor.getItem()); // => { name: 'Jones McFly' }
  }
})

Answer 2

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

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>

更新了这个问题，因为Ananthakrishna告诉我，您可以从“dop区域”中拖出drop区域中的一个元素

我们需要使用事件cdkDragDroked

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

并且，在我们的功能更改位置"检查"如果是下降里面。我使用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
    }
  }

看到分叉闪电战了吗