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

【问题标题】：Angular CDK Drag Drop - Transfer Item without Loss of VisibilityAngular CDK 拖放 - 在不丢失可见性的情况下传输项目
【发布时间】：2019-12-28 03:16:13
【问题描述】：

当我检查该项目时，它似乎已被激活。这个类是：“cdk-drop-list-receiving”。我该如何做我不想以任何方式迷失的事情？提前谢谢你。

备用图片网址：https://i.hizliresim.com/DOOkP6.gif

这不是我独有的问题。您还可以查看示例。执行一次传输操作，你会发现它在离开之前已经从列表中“隐藏”了。 https://stackblitz.com/edit/angular-cdk-drag-drop

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

【问题讨论】：

可见性到底有什么问题？有什么你可以看到或看不到的东西吗？是否可以包含一个代码示例来查看
图形使它更清晰，谢谢，虽然我不确定问题出在哪里。如果您可以复制一个有用的最小存储库。
希望我们能找到解决办法。 :) @chrismclarke
这不是我独有的问题。您还可以查看示例。执行一次传输操作，你会发现它在离开之前已经从列表中“隐藏”了。 stackblitz.com/edit/angular-cdk-drag-drop@chrismclarke
啊，我明白了。是的，问题出在 drop 事件逻辑中，如果您不希望它从顶部消失，那么您希望将其保留在表示图像的 items 数组中。您将需要手动更改何时推送/弹出数组值的逻辑

标签： angular angular-cdk

【解决方案1】：

这里基本上有两个挑战

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

第一个很简单，可以用moveItemInArray方法代替transferItem，这里有一个blitz的例子：

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

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

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

【讨论】：

这里的另一种解决方案可能是将多个元素堆叠在一起，因为无论如何只能放置六个轮胎。
是的，这就是第二次闪电战中采用的方法。不漂亮，但如果它能完成工作！
不错的解决方法！我认为这个问题可能会更加简单，因为它不仅仅是这个 CDK 中的“复制”功能。无法向用户显示“拖动”元素的来源真的很笨拙。 copy 可能只是 origin location 选项上的 boolean 选项。

【解决方案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' }
  }
})

【讨论】：