【问题标题】:Angular CDK Drag and drop with placeholders in one of the drop listsAngular CDK 在下拉列表之一中使用占位符拖放
【发布时间】:2020-01-18 11:13:11
【问题描述】:

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

我在这里创建了一个沙盒:https://codesandbox.io/embed/angular-iiuhq?fontsize=14

我认为代码可以作为想法(尽管由于某种原因我无法让它在沙箱中工作)。唯一的问题是拖拽是超级不自然和波涛汹涌的。我希望占位符保持可见,直到我将元素拖动到它上面,然后消失在拖动的元素下方。现在,似乎被拖动的元素左右或上下推动其他元素,然后占位符之一消失。

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

另外,我知道*cdkDragPlaceholder 指令,但我不清楚如何在其中一个下拉列表中使用它并使占位符始终可见(因此不仅在拖动事件开始时)。

【问题讨论】:

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


    【解决方案1】:

    我为每个元素使用一个 cdkDropList 来执行类似任务:stackBlitz

    【讨论】:

    • 我最终也这样做了。你的例子不起作用,顺便说一句
    • 感谢您的测试)它只需要 >1430px 浏览器窗口即可工作。 angular-srg6e3.stackblitz.io
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-29
    • 2022-10-05
    • 2014-10-27
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    • 2019-05-05
    相关资源
    最近更新 更多