问题标签 [angular-cdk-drag-drop]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
33 浏览

angular - 如何限制 cdkDrag 元素仅在特定元素旁边拖动?

说我ngFor用来填充我的cdkDropList. cdkDrag将元素限制为仅在某些元素旁边拖动的最有效方法是什么?

0 投票
2 回答
423 浏览

angular - Angular ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。cdkdrag

我正在尝试以角度使用 cdkDragDropModule 创建表布局,我从数据库中获取表对象并将表对象预加载到拖放容器中的正确位置。一切正常,但我收到以下错误:

我的 component.html 是

并且 component.ts 是

我已经尝试了一切,但似乎无法让它消失。

0 投票
1 回答
973 浏览

angular - Angular CDK 拖放 - 对齐网格

我正在尝试使用 Angular 的 CDK 拖放功能,并且效果很好,但是我找不到有关如何捕捉到网格的文档。

我发现了一个 GitHub 问题,指出已添加此功能。

https://github.com/angular/components/issues/15471

这就是我想通过 CDK 的拖放实现的目标。

https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid

0 投票
0 回答
35 浏览

twitter-bootstrap - 有没有实现cdk拖放滚动的方法

我已经在我的应用程序中实现了 cdk 拖放。

我在角度 7 工作。

Angular 材质版本为 7.3.7,cdk 版本为 7.3.7。

我的问题是在 cdkDropList 中拖动项目时,如果列表很长且溢出,则该项目无法拖出当前视图。

我搜索了很多解决方案,并得出了一些发现。

https://github.com/angular/components/issues/13588

它说问题出在版本上。因此,一种解决方案是更新材料和 cdk 版本。

但是我对 angular 7 有很多依赖,无法更新整个应用程序。

那么有什么方法可以在不更新应用程序的情况下在当前应用程序上实现这一点?

任何帮助都是不言而喻的。

0 投票
1 回答
160 浏览

angular - CDK拖放可调整大小(角度)的问题

我尝试使用 Angular CDK 拖放来调整元素的大小,但我无法得到它。

有人可以帮助我吗?我需要做什么才能达到这个结果?我正在构建一个类似于报告的模板,我可以在其中拖放 DIV HTML 中的字段。但是 CDK D&D 我无法调整组件的大小。

0 投票
2 回答
573 浏览

angular - 使用 Angular CDK DRAG 在拖动元素上丢失旋转位置

我正在尝试使用范围滑块旋转元素,但是每次拖动元素时,它都会在拖动时丢失旋转值,并且它还会更改框的位置并将其放置在开头。我附上了一个链接到我在 stackblitz 创建的一个简单的测试项目,这样我就可以重新创建我遇到的问题。

stackblitz 拖动和旋转示例

有人可以指导我解决问题吗?

我把代码放在这里以防有人不能很好地链接到测试项目:

app.module.ts

app.component.ts

app.component.html

app.component.css

非常感谢您提前

0 投票
0 回答
62 浏览

angular - 使用ngFor时如何为cdkDropListConnectedTo设置Angular Material cdkDropList #name

我有许多用于拖放功能的列,并且需要知道如何动态设置 cdkDropList #name 以在使用 ngFor 时与 cdkDropListConnectedTo 一起使用。

我尝试将连接到的值注入 cdkDroplist 并设置下拉列表的 ID,但连接到似乎不起作用,并且允许将任何内容拖到任何列中。

0 投票
0 回答
96 浏览

html - 如何在 pdf 文件中获取和检索 DragDropModule 的坐标

我在 jhipster 生成的角度应用程序中使用 PDfjs-dist 以将 pdf 文件显示为画布。

我还使用 CDK 拖放模块将其拖放到 pdf 中,以便为我想要插入到后端的 pdf 文件中的签名获取占位符。

我寻找一种方法来知道我将元素放在 pdf 文件中的位置(而不是在 html 页面中)。我发现这个解决方案是由 nodeJs 上的某个人实现的。

https://codepen.io/ValerioEmanuele/pen/pGRZqe# 我也使用了这个树函数,但它只给了我 html 页面上的坐标;

但是,我认为他的示例中显示的坐标不在 pdf 文件画布中,而是在整个 html 页面中。

你有什么想法 ?

非常感谢您提前

0 投票
1 回答
967 浏览

angular - 如何使用 Angular CDK 拖放库上传文件

我有一个自定义的角度文件上传组件,我想使用Angular CDK 拖放。它看起来不错,但是当我尝试实现它来处理文件上传(将文件拖到 dropzone 中)它似乎不起作用并且浏览器在新选项卡中打开文件。

我现在拥有的看起来像这样:

所以我的问题是,我可以使用 Angular CDK 拖放库进行文件上传吗?如果可以,我在这里缺少什么?

0 投票
1 回答
298 浏览

angular - Angular 材质拖放 cdk:将项目合二为一并交换元素

参考 Angular CDK 拖放,我正在尝试构建以下视频中显示的内容:

https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9

我想同时实现两个功能:合并卡片和交换项目的位置。我在 Angular 材料中找不到此功能。

所以我尝试了一个hack:

在此处输入图像描述

在上图中,假设 1,2,3,4,5,6 是我的数组值,0,1,2,3,4,5 是我的数组索引。

我尝试了一种逻辑来识别合并和交换案例: 在此处输入图像描述

注意:在真实元素前后添加了-1 id 记录。

合并案例是:从 previousIndexValue > -1 && currentIndexValue > -1(当前元素之前/之后除外)否则交换案例

代码是:

如果-1(假元素)具有相同的高度并且在容器中可见,则上述逻辑对我来说很好,如下面的视频所示:

https://youtu.be/1HUOSeyWVPs

但是,如果我隐藏/不透明度 = 0/设置可见性隐藏,则逻辑开始将交换识别为合并。

上述逻辑似乎对我不起作用,每当我放下卡进行交换时,上述逻辑都会给出“合并”。

这是演示链接:Stackblitz 演示