Angular CDK在占位列表之一中使用占位符拖放

时间:2019-09-17 14:44:43

标签: angular drag-and-drop angular-cdk angular-dragdrop angulardraganddroplists

我在Angular CDK拖放的以下用例中苦苦挣扎:我希望第二个放置列表在组件加载时是一个包含空元素的数组(因为我想在那里有很多可替换的占位符从第一个列表中拖动的元素)。

我在此处创建了一个沙箱:https://codesandbox.io/embed/angular-iiuhq?fontsize=14

我认为代码可以作为主意(尽管由于某些原因,我无法使其在沙箱中运行)。唯一的问题是拖动非常不自然且不连贯。我希望占位符保持可见,直到我将元素拖动到其上方,然后消失在所拖动的元素下方。现在,似乎拖动的元素将其他元素左右或上下推,然后其中一个占位符消失了。

也许你们有我没想到的更好的方法。

我也了解*cdkDragPlaceholder指令,但是对我来说,如何在一个下拉列表中使用它并使占位符始终可见(这不仅在拖动事件开始时如此)对我来说并不明显)。

1 个答案:

答案 0 :(得分:0)

我为模拟任务使用了每个元素一个cdkDropList:stackBlitz