问题标签 [angular-dragdrop]

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 投票
4 回答
5241 浏览

angular - 如何限制拖放容器仅接受Angular Material Drag-Drop Feature中的一项

使用 @angular/cdk/drag-drop 模块(Angular Material Drag and Drop)时...有没有办法限制放置容器以便只接受一个值而不是多个值?我正在尝试创建表单,用户可以将图像拖放到应该只有一个项目的字段中。我正在使用标准示例代码来实现 拖放 | Angular Material,但找不到可以限制放置项目数量的解决方案,其次找不到保持拖动列表相同的解决方案(拖动的项目将保留在拖动容器中),因此您复制而不是将项目移动到放置容器。是否有任何解决方案或可以帮助提供示例代码的人?

HTML:

TS:

0 投票
2 回答
698 浏览

angular - 如何保存我从后端获得的 Angular 重新排序列表的顺序

当用户打开页面时,他们会看到一个列表,他们可以通过角度拖放重新排序。问题当然是前端顺序变了,后端顺序没有变。跟踪此列表顺序的最佳方法是什么?这样当用户重新访问时,他们会显示他们离开的顺序

0 投票
1 回答
1027 浏览

angular-material - 在嵌套放置区域 Angular 内拖放

我正在尝试在另一个放置区域内创建一个放置区域,并且我希望能够在两个放置区域中放置。为了实现这一点,我尝试使用“cdkDropListConnectedTo”作为所有放置区域的 id,但由于某种原因未检测到子放置区域。

stackblitz 链接: https ://stackblitz.com/edit/drag-drop-inside-another-container?file=app%2Fcdk-drag-drop-connected-sorting-example.html

0 投票
1 回答
101 浏览

angular - 使用 CdkDragDrop 从特定下拉列表中拖动时,如何更新 Angular 中的变量?

我正在使用带有材质拖放功能的 Angular 8。我有多个下拉列表链接到三个目标下拉列表。在我的 StackBlitz 示例中我想只允许列表中具有 id MajHermeticVirtues 的一项(Major Hermetic Virtues 下的第二组)。我有一个名为 allowedHermeticVirtues 的布尔值,如果我从该列表中拖动一个项目,我想将其设置为 false。如果该变量随后设置为 false,我如何使用它来阻止源列表中的更多项目?

所有列表都使用

对于丢弃事件。

如果我从特定列表中拖动项目,如何更新变量? 这个问题几乎是我要找的,但只针对特定的源列表(在我的例子中,是 MajHermeticVirtues 一个)。

0 投票
1 回答
53 浏览

angular - 下拉角度

我想做一个角度下拉,但我只收到下拉列表中的第一项。

在第一个 *ngFor 中,我收到了正确的值,但在第二个 *ngFor 中,我只收到了列表中的第一项。下图中的示例。 在此处输入图像描述 你能帮我解决这个问题吗?

0 投票
1 回答
599 浏览

angular - 拖放带有对象数组的拖放

我有两个对象数组,一个 A 和一个 B。

我有一个列表,我打算将对象从 A 拖到 B 并从 B 拖到 A。

我的问题是,当我将所有对象从 A 拖到 B 或从 B 拖到 A 时,尝试将对象传递给空列表时,它会停止工作。

0 投票
1 回答
251 浏览

angular - 拖放列表 - 不适用于我的数据结构(包括 stackblitz)

我决定从我的大项目中进行较小的实施。目前,我正在尝试为拖放功能返工列表。在我的项目中,我在列表中看到名称,但无法拖放任何内容。在 stackblitz 中,我什至无法在我的列表中显示任何内容。我它来进行拖放。我的堆栈闪电战,实现更小。

编辑 1

拖放与材质列表相结合会很好。

编辑 2

当我从文件元素中删除 observable 时,错误消失了,但遗憾的是仍然无法正常工作。那里需要可观察的。

0 投票
0 回答
109 浏览

node.js - 角度拖放可重用组件

这个角度拖放示例中,组件只是在移动

但我需要保留原始文件并生成 N 个副本并移动它们。

我需要左侧的测试框并且可以拖动 n 次。例子

0 投票
1 回答
1065 浏览

angular - 将 formio api 与我的 Angular 项目集成

git中的源代码

现场演示

我想在我的 Angular 应用程序中开发 Angular8 拖放表单构建器功能在上面的 git 代码中,它是使用纯开发的formio

我的要求是我想将这个角度拖放功能集成到我已经存在的角度项目中。

我很高兴整合formio,请帮助我如何整合整合。

有没有解释的教程?

0 投票
1 回答
130 浏览

angular - 可拖动网格角度

我创建了一个可以使用角度 cdkdrag 重新排序的网格,代码如下

和这样的下降功能

它不像我想要的那样工作,当我将 1 号移动到 4 号时,它应该使 1 号在 4 号位置,4 号滑到 3 号,3 号滑到 2 号,2 号滑到 1 号。但是它不像那样工作,如果它是一个像表格一样的列表,它应该工作,但它是一个网格,我不知道会发生什么,我错过了什么吗?

https://stackblitz.com/edit/angular-38vdnx?file=src%2Fapp%2Fapp.component.html