【问题标题】:Organize and re-order files by drag and drop angular from array通过从数组中拖放角度来组织和重新排序文件
【发布时间】:2020-03-10 10:00:15
【问题描述】:

我致力于功能,该功能需要让用户能够在将文件生成到服务器之前重新排序文件。我使用 ng bootstrap 创建模态并获取文件的输入数组,然后在模态中显示文件。用户如何替换模态文件上的文件顺序?我需要一个包,让您可以从 UI 重新订购文件。

【问题讨论】:

    标签: angular drag-and-drop


    【解决方案1】:

    我衷心推荐使用 "@angular/cdk" 包,它由 Angular 团队自己维护,这意味着它很可能总是随着即将发布的 Angular 版本更新,经过良好测试,有据可查,您应该得到开发人员的适当支持。

    到目前为止,我已经在多个项目中使用了它的拖放功能,并且从来没有遇到任何问题,尽管一如既往 - 您的里程可能会有所不同。

    包的 API(包括拖放)记录在材料组件站点上: https://material.angular.io/cdk

    使用拖放重新排序列表的基本示例: https://material.angular.io/cdk/drag-drop/overview#reordering-lists

    请注意,虽然文档是作为材料文档的一部分托管的,但您不需要材料依赖项本身,只需要 CDK 包。

    【讨论】:

    • 嘿,它的工作,但我拖放时没有动画是什么问题? @TotallyNewb
    • API 为特定状态下的特定项目添加类,但没有预定义样式 有关如何添加动画的示例,请参见:material.angular.io/cdk/drag-drop/overview#stylingmaterial.angular.io/cdk/drag-drop/overview#animations 或者只需打开提供的示例stackblitz 并查看 css 文件。
    • 感谢@TotallyNewb,如何使拖放工作 RTL ?我使用 cdkDropList cdkDropListOrientation="horizo​​ntal" 但它只能从左到右工作
    • 我没有在 RTL / BiDi 解决方案中使用它,而且我是本地 LTR 用户,但这是我的看法:似乎 CdkDragDrop 事件中的索引是 visual的索引> order 而不是 logical order,即 RTL 元素将反转它们。您可以在 CDK git 页面上询问它 - 也许其中一个提供商中有一些设置可以全局反转它。如果没有,手动反转索引应该相当容易 - 请参阅 stackblitz 中的示例:stackblitz.com/edit/angular-3y7uhf
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-11-08
    • 1970-01-01
    • 1970-01-01
    • 2020-04-05
    • 2014-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多