Angular CDK 拖放 - 在不丢失可见性的情况下传输项目

Question

我检查该项目时它似乎已被激活。这个class是："cdk-drop-list-receiving"。我该怎么做才不会以任何方式丢失？提前谢谢你。

替代图片URL：https://i.hizliresim.com/DOOkP6.gif

这不是我独有的问题。您还可以查看示例。执行转账操作，你会发现在你离开之前，它是从列表中"hidden"。 https://stackblitz.com/edit/angular-cdk-drag-drop

不释放我要的元素，别让他消失

Answer 1

这里基本上有两个挑战

保留可重复拖放的部件顶部列表（复制，而不是从拖放容器中传输项目）
防止默认触发器将元素从拖动列表中删除，一旦元素位于不同的拖放区

第一个很简单，你可以使用moveItemInArray方法代替transferItem，一个闪电战的例子在这里：

https://stackblitz.com/edit/angular-xjex4y

第二个挑战（这样它甚至不会暂时消失）似乎更具挑战性，这里正在进行大量讨论：https://github.com/angular/components/issues/13100

可以在此处查看给出的解决方法：https://stackblitz.com/edit/angular-cdkdrag-across-templates-using-ids

Answer 2

我很喜欢你们的产品

使用 ng-dnd. You can check the 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' }
  }
})

Angular CDK 拖放 - 在不丢失可见性的情况下传输项目

Angular CDK Drag Drop - Transfer Item without Loss of Visibility

angular

angular-cdk

使 DOM 元素可拖动

将 DOM 元素设为放置目标