角度拖放图标到画布答案

【问题标题】：Angular drag-drop icons to canvas角度拖放图标到画布
【发布时间】：2020-07-09 10:21:44
【问题描述】：

我需要角度拖放方面的帮助。就像我需要将图标拖到画布上一样。

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

【问题讨论】：

stackoverflow.com/questions/59881107/… ?
@Eliseo 来自您的建议 here 文本在框中时是固定的。放置后如何更改该属性，可以再次将其替换到框内的另一个位置

标签： javascript html angular drag-and-drop

【解决方案1】：

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

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

【讨论】：

但是现在它可以被拖出那个盒子了，我不想要那个。我所需要的只是它应该在那个盒子里，也可以放在那个盒子里的任何地方。请参阅this 这正是我所需要的，但是一旦将物品放在那个盒子里，它就会被锁定在它的位置。我不想那样，你能理解我对吗？...
@Ananthakrishna，抱歉耽搁了，我更新了响应和 stackblit。希望对你有帮助
注意：不要忘记cdkDropListSortingDisabled="true" 否则当您移动掉落的物品时，所有物品都会随机移动
谢谢你我需要这个确切的，但即使我复制了 stackbliz 代码，我也没有得到确切的结果。这是因为我的任何角度版本都是角度 9
你能加入this聊天吗。

【解决方案2】：

使用ng-dnd 很容易实现您的目标。您可以查看examples 并尝试一下。

使 DOM 元素可拖动

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

constructor(private dnd: DndService) { }

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

将 DOM 元素制作成放置目标

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

【讨论】：