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

我正在尝试模块化应用程序。我遵循了这些说明：https ://angular.io/guide/feature-modules

尝试在功能模块下的组件中导入拖放模块时，出现以下错误：

我做了什么： 1. 在 app.module.ts 导入中添加了 FeatureModule 2. 在 feature.module.ts 的导入和导出中添加了 DragDropModule

谁能告诉我我做错了什么？

包.json

{ "name": "angular-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.1.9", "@angular/cdk": "^9.2.4", "@angular/common": "~9.1.9", "@angular/compiler": "~9.1.9", "@angular/core": "~9.1.9", "@angular/forms": "~9.1.9", "@angular/platform-browser": "~9.1.9", "@angular/platform-browser-dynamic": "~9.1.9", "@angular/router": "~9.1.9", "@auth0/angular-jwt": "^4.2.0", "@fortawesome/angular-fontawesome": "^0.6.0", "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@ngrx/store": "^9.2.0", "angular-font-awesome": "^3.1.2", "bootstrap": "^4.5.0", "jquery": "^3.5.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.7", "@angular/cli": "~9.1.7", "@angular/compiler-cli": "~9.1.9", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" } }

一旦 cdkDrag 向用户显示他们无法在该区域中创建 cdkDrop 然后在非受限区域中创建 cdkDrop 时删除样式，是否有办法设置受限区域的样式

我尝试使限制区域 [cdkDropListDisabled]= "true" 设置样式，然后设置 .cdk-drop-list-disabled{} 的样式，但这并没有给出预期的结果，因为它甚至在任何 cdkDrag 事件之前都设置了限制区域的样式。期望的结果是限制区域在 cdkDrag 上动态设置样式，并在 cdkDrop 之后删除样式

我正在实现一个拖放功能，我想从列表中拖动一个项目并将其放置在放置区域的任何位置。

拖动项目的位置应该是我将鼠标放在它的位置（使鼠标指针离开拖动状态）。我尝试使用 Angular Material ui 中的 cdk 拖放功能，但找不到合适的解决方案来解决我的问题。

最后，我应该得到拖放列表项相对于拖放区的绝对位置。

目前，我已经提到了插件/库，而在这些插件/库中，我只发现了将项目从一个列表转移到另一个列表。

这是我想要实现的功能的图表...拖放功能图

我正在尝试使用angular material 提供的拖放功能，以便能够将选项列表中的项目移动到包含或排除列表（取决于在Where to move组中选择的单选按钮启用的内容）

到目前为止它可以工作，但是当只Include启用列表时会有一些奇怪的事情。

如果我尝试将一个项目移动到排除列表，而不是返回到选项列表的项目，它被添加到包含列表中。只有当我拖动项目而不将鼠标悬停在包含列表上时，它才会按预期工作。

当我想要做的是将它放到另一个列表中时，有什么方法可以防止该项目被放入包含列表中？

顺便说一句，这与禁用排除列表无关。我已经在启用两个列表的情况下对此进行了测试，并且总是赢得我在将项目放入所需列表的过程中传递的第一个列表。

这是stackblitz中的一个演示

在对 Angular Material 10 进行更新后，我遇到了拖放指令的问题。enter， incdkDropList不再存在，所以我的代码

不工作。我试图找出解决方案，但没有成功。enter这是不推荐使用的函数https://stackblitz.com/edit/angular-dragdrop-grid-pnyded的一个示例， 任何人都可以帮我解决这个问题吗？非常感谢

我正在使用 Angular DragDropModule，我想将一个对象从一个列表拖到另一个。这工作得很好，但我只需要在到达列表的第一个或最后一个索引处删除我的对象。这里的例子显示了一个带有输入谓词的数字列表，它只允许精灵数字，但我想知道如何解决我的问题。

我希望我足够清楚。如果您知道使用谓词解决我的问题的另一种方法，那也很好。

谢谢！

我正在尝试使用角度材料拖放组件来重新排序基本无线电输入列表。

当页面加载时，会检查正确的无线电输入。我的问题是，当我使用 [Grab] 句柄重新排序列表中的选中项目时，单选选项似乎已重置，我无法弄清楚如何保留选择。

对我来说真正奇怪的是，如果这是一个复选框，它会正常工作。所以我假设这与我设置无线电输入的方式有关。

感谢您能够提供的任何帮助。

这是我的堆栈闪电战： https ://stackblitz.com/edit/angular-2q94xh

app.component.html

app.component.ts

我在 Angular Material（Angular 8）中遇到了拖放库的问题。

我开发了以下代码：

有 2 个下拉列表：接收者和发送者。

列表中有图像，我可以将图像从发送者列表移动到接收者列表（反之亦然）。

该drop方法的打字稿源代码：

当我拖动img悬停receiver cdkDropList时，接收器的项目会根据当前拖动的项目的位置进行移动（这是 Angular Material Drag and Drop 中“在列表之间传输项目”的标准行为）。

我需要的是禁用接收器 dropList 中项目的移动/移动行为（重新排列）。

我试图CSS用transform: translate3d(0px, 0px, 0px)or 禁用运动，transform:none但没有任何效果。

我有这个问题很长一段时间了，无法弄清楚，想问是否可以提供帮助。不知何故，当我为它设置动画时，它的“放置区域”的位置cdkDropList 不会更新。

• 我想做的事

创建一个cdkDropList <div>充当容器的容器（我们称之为cdkDropList <div> Bin），我在其中从另一个列表中删除cdkDrag元素（我们称之为cdkDrag元素Item）。Bin应该在Item被拾起时飞入并在Item被丢弃时飞出（无论它是回到原来的还是Bin中）。cdkDropList

• 怎么了：

动画效果很好，但是当我将Item拖入Bin时，Bin无法识别。我所说的'不识别'的意思是没有触发BincdkDropListDropped的功能。仅当我通过拾取和放下Item来制作动画时才会出现此问题。我还尝试使用一个按钮为Bin设置动画，单击该按钮让 bin 出现/消失，效果很好（但这不是我想要实现的方式）。

• 例子：

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

在这个 Stackblitz 示例中，我重新创建了不起作用的东西，因为在没有上下文的情况下发布我的代码会太多且难以理解。

注意：在示例的控制台中，您将看到ItemDropped something何时被放入Bin。当Item被放回或 bin 外的任何地方时，它将在控制台中打印。Dropped back

• 到目前为止我尝试了什么：

使用...

...CSS动画而不是Angular

...ChangeDetectorRef

...Timeout

我真的被困住了，不知道如何解决这个问题，希望能得到任何建议或帮助。

我想使用模块构建一个简单的拖放游戏@angular/cdk/drag-drop，我有一些拖放区和一个可拖动的项目，玩家应该选择正确的拖放区并将项目拖动到它。我的问题是我无法将自定义数据对象绑定到拖放区列表。

这是我在 stackblitz 上的项目： https ://stackblitz.com/edit/angular-ivy-42drhc?devtoolsheight=33

谢谢你的帮助。