- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 CDK Material 拖放实用程序来创建启用拖放功能的表单编辑器。
它工作正常,但嵌套了 cdkDropList
内cdkDropListGroup
不起作用。
我无法将任何内容拖入嵌套的下拉列表容器。
<div class="container">
<div class="row" cdkDropListGroup>
<div class="col-2">
<div id="toolbox" cdkDropList>
...
</div>
</div>
<div class="col-10">
<div id="formContainer" cdkDropList>
...
<div class="row">
<div class="col-md-6" cdkDropList>
... column 1 content
</div>
<div class="col-md-6" cdkDropList>
... column 1 content
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
我花了一些时间,但由于这些帖子的提示,我终于找到了解决方案:
cdkDropListGroup
不支持嵌套下拉列表。您需要将下拉列表与
[cdkDropListConnectedTo]
连接起来。捆绑。
[cdkDropListConnectedTo]
的数组绑定(bind)列表顺序会影响放置行为。此外,嵌套下拉列表中的排序将不起作用。
cdkDropList
的服务。拖动时。
export class DragDropService {
dropLists: CdkDropList[] = [];
currentHoverDropListId?: string;
constructor(@Inject(DOCUMENT) private document: Document) {}
public register(dropList: CdkDropList) {
this.dropLists.push(dropList);
}
dragMoved(event: CdkDragMove<IFormControl>) {
let elementFromPoint = this.document.elementFromPoint(
event.pointerPosition.x,
event.pointerPosition.y
);
if (!elementFromPoint) {
this.currentHoverDropListId = undefined;
return;
}
let dropList = elementFromPoint.classList.contains('cdk-drop-list')
? elementFromPoint
: elementFromPoint.closest('.cdk-drop-list');
if (!dropList) {
this.currentHoverDropListId = undefined;
return;
}
this.currentHoverDropListId = dropList.id;
}
dragReleased(event: CdkDragRelease) {
this.currentHoverDropListId = undefined;
}
}
register
添加一个新的下拉列表到 dropList
每个 cdkDropList
使用的数组.dragMoved
确定正确 cdkDropList
在鼠标指针下方。cdkDropList
.
<div
*ngIf="container"
cdkDropList
[cdkDropListData]="container.controls"
[cdkDropListConnectedTo]="dragDropService.dropLists"
[cdkDropListEnterPredicate]="allowDropPredicate"
(cdkDropListDropped)="dropped($event)"
>
<div
*ngFor="let item of container.controls"
cdkDrag
[cdkDragData]="item"
(cdkDragMoved)="dragMoved($event)"
(cdkDragReleased)="dragReleased($event)"
>
Drag Content
</div>
</div>
export class FormContainerComponent implements OnInit, AfterViewInit {
@ViewChild(CdkDropList) dropList?: CdkDropList;
@Input() container: IFormContainer | undefined;
allowDropPredicate = (drag: CdkDrag, drop: CdkDropList) => {
return this.isDropAllowed(drag, drop);
};
constructor(
public dragDropService: DragDropService
) {}
ngOnInit(): void {}
ngAfterViewInit(): void {
if (this.dropList) {
this.dragDropService.register(this.dropList);
}
}
dropped(event: CdkDragDrop<IFormControl[]>) {
// Your drop logic
}
isDropAllowed(drag: CdkDrag, drop: CdkDropList) {
if (this.dragDropService.currentHoverDropListId == null) {
return true;
}
return drop.id === this.dragDropService.currentHoverDropListId;
}
dragMoved(event: CdkDragMove<IFormControl>) {
this.dragDropService.dragMoved(event);
}
dragReleased(event: CdkDragRelease) {
this.dragDropService.dragReleased(event);
}
}
cdkDrag
被移动,dragMoved
确定正确 cdkDropList
cdkDrag
被释放,复位确定cdkDropList
isDropAllowed
设置为 [cdkDropListEnterPredicate]="allowDropPredicate"
的方法到 cdkDropList
cdkDropList
这是正确的:) 关于Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67337934/
我正在尝试引用几个子网来创建 ec2 实例,但我有点卡住了。 假设我有这个: const vpc = new Vpc(this, 'gwc-vpc', { cidr: "10.20.
我们正在使用 AWS CDK 来创建我们的无服务器 REST API。但是,有大量端点,有时我们必须销毁和重新部署我们的堆栈。为了防止 REST API URL 随每次部署而更改,我计划在一个堆栈中创
我看到了各种使用 AWS CDK 的示例,其中一些使用 aws-cdk-lib,另一些使用 @aws-cdk/core。这些之间有什么区别,什么时候应该使用一个或另一个? 最佳答案 aws-cdk-l
我看到了各种使用 AWS CDK 的示例,其中一些使用 aws-cdk-lib,另一些使用 @aws-cdk/core。这些之间有什么区别,什么时候应该使用一个或另一个? 最佳答案 aws-cdk-l
我是 CDK 的新手,需要了解高级构造与低级构造之间的区别。谁能用简单的话解释一下:) 热烈的问候。 最佳答案 CDK 旨在让任何人都能轻松创建具有预配置默认值的组件。这意味着您可以(使用更高级别的构
我不想使用我的默认 aws 配置文件和帐户进行 cdk 开发 所以我创建了一个新帐户和一个新的个人资料 cdkprof使用 aws configure --profile cdkprof . 我已经在
我有一个在 cdk.context.json 中存储一些键值的用例,但是如果 cdk.context.json 不存在或者它不包含我希望 CDK 回退到其他代码来发现的键值(value)。 例如,假设
我创建了一个将部署在多个区域的 CDK 堆栈。其中一种构造只能部署在一个地区。在 Cloudformation 中,我只是向资源添加一个条件,但我还没有找到一种方法来对 CDK 构造做类似的事情。 可
以下CDK代码 const queue = new sqs.Queue(this, 'my-sqs-queue', { visibilityTimeout: cdk.Duratio
Use an AWS CloudFormation Parameter AWS CDK 的部分提到了如何自定义您的 AWS CloudFormation 模板。指的是云形成模板 .我想将参数添加到我的
@aws-cdk/pipelines 的文档似乎表明可以使用 codePipeline Prop 将 CDK 管道添加到现有的@aws-cdk/aws-codepipeline/Pipeline:ht
我遇到了一个问题,我们想要确保在 CloudFormation 资源的命名中遵循一些约定。这个想法是我们使用 CDK Aspects来处理资源。一个简单的例子: export class Bucket
我正在寻找一种方法来指定我的项目中堆栈的部署顺序。 我知道我可以添加依赖项,但是这些堆栈不相互依赖,我可能想稍后删除一些。 我有一个服务框架,每个其他堆栈(例如 rds)都需要这些服务框架。这些都是在
是否可以使用 AWS CDK CLI 以某种方式获取另一个堆栈所依赖的堆栈列表?例如,给定一个类似于以下内容的堆栈列表: const app = new App(); const alphaStack
我正在使用 CDK Python API 定义 Glue 爬虫,但是,CDK 生成的模板在爬虫资源中包含空的“目标” block 。 我一直没能找到一个例子来模仿。我试过改变目标对象的定义,但对象定义
我们正在开发一个多账户 CDK 应用程序,并在 CodeBuild 上进行持续部署。我们知道 CDK authentication issues所以我们使用 $ aws sts assume-role
aws-cdk 允许您合成一个堆栈 - 这会产生许多文件 - 包括 .template.json 文件。 可以在没有 aws-cdk 工具的情况下部署这个 .template.json 文件吗?还是设
是否可以使用 aws-cdk 部署到 localstack? 想过从无服务器切换到 cdk,但除了 aws SAM 之外找不到任何其他本地测试选项。 最佳答案 我现在正在应对同样的挑战。我得到的方法是
我的 CDK 堆栈包含太多参数(子网 ID、API URL),无法在命令行中指定。所以我想将它们保存在单独的文件中,例如 dev.properties 或 prod.json。来自 cdk.json
我的 CDK 堆栈包含太多参数(子网 ID、API URL),无法在命令行中指定。所以我想将它们保存在单独的文件中,例如 dev.properties 或 prod.json。来自 cdk.json
我是一名优秀的程序员,十分优秀!