角度拖放:嵌套cdkDropLists中的cdkDrag项目拖放
角度拖放是一种在Angular框架中实现项目拖放功能的方法。它基于Angular的CDK（Component Dev Kit）库，通过使用cdkDrag和cdkDropList指令来实现拖放功能。
cdkDrag指令用于标记可拖动的项目，而cdkDropList指令用于标记可接受拖放项目的容器。通过将cdkDrag应用于项目元素，并将cdkDropList应用于容器元素，可以实现项目在容器中的拖放操作。
角度拖放的优势包括：
- 简单易用：使用Angular CDK提供的指令，可以轻松地实现拖放功能，无需编写复杂的自定义代码。
- 灵活性：角度拖放提供了丰富的配置选项，可以自定义拖放行为，如限制拖放的方向、设置边界、定义拖放触发条件等。
- 跨平台支持：角度拖放可以在不同的设备和浏览器上运行，确保在各种环境下都能正常工作。
角度拖放的应用场景包括但不限于：
- 任务管理：可以使用拖放功能实现任务列表的排序和重新分配。
- 图片库：可以使用拖放功能实现图片的拖动排序和分组。
- 项目管理：可以使用拖放功能实现项目的拖动排序和分配。
腾讯云提供了一系列与角度拖放相关的产品和服务，包括但不限于：
- 云服务器（CVM）：提供可扩展的计算资源，用于部署和运行角度拖放应用。
- 云数据库MySQL版（CDB）：提供可靠的数据库存储，用于存储角度拖放应用的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储角度拖放应用中的文件和资源。
更多关于腾讯云产品和服务的信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
file=src%2Fapp%2Fapp.component.html 我有一个外层的cdkDropListGroup，里面有两个cdkDropLists。我希望能够将一个cdkDrag项放入第一个cdkDropList中，如果放入其中，还可以放入其中的嵌套cdkDropLists中。您可以看到，我正在记录您将项目放入的dropList，它始终是外部droplist id。 我怎样才能放入嵌套<em
浏览 72提问于2021-09-19得票数 0
回答已采纳
3回答
不幸的是，我在一个常见的问题中找不到解决方案。以下是指向代码<code>C0</code>的链接有空节点，但每个人都声明了自己的子数组。我尝试在一个组件中使用html级别的ng-template和ng-container来管理这种rappresentation，这就是我的工作。
问题是我需要使用拖放来对节点进
浏览 41提问于2019-12-03得票数 1
回答已采纳
1回答
我试图使用拖放功能与角材料7相关。
我使用ngTemplateOutlet将我的模板分割成可重用的部分，每个选项都可以是Thing™或嵌套的Thing™，后者有更多的子对象™。嵌套的Things™显示为扩展面板。我希望所有一级Things™都可以重新排序，就像有一个列表一样。(好的，好的，很明显，这是一个带有正常和嵌套选项的可重排序的sidenav，只是假装它不那
浏览 0提问于2018-11-08得票数 5
回答已采纳
1回答
根据Angular CDK Drag Drop ，所有可丢弃的项都应该使用*ngFor指令来编写，迭代通过一个数组。但是如果我想让项目成为可丢弃的是angular组件呢？使它们可丢弃的过程是什么？例如，下面的代码将呈现一个普通的droppable div。如果我想在第二行渲染多个角度组件怎么办。在这种情况下，我不能使用*ngFor指令，因为每个角度分量都非常不同，并且我不能将它们保存在任何数组中。></widget-tempera
浏览 12提问于2019-11-19得票数 2
我目前正在使用角CDK拖放功能，我希望将元素从一个CdkDropList移动到一个CdkDragBoundary，因此我需要连接它们。为了更好地解释这一点，假设在div的一侧有一个拖放列表，我希望列表中的元素成为div中的自由拖放元素，但是这似乎不适用于cdkDropList和cdkDragBoundary，而且从我测试的结果来看，它也不适用于两个cdkDropLists。如果有人知道如何处理这个问题，请告诉我，即使
浏览 7提问于2022-04-27得票数 0
我有多个cdkDropLists，并将项目从一个拖放到另一个。但是，我希望它们中的一个隐藏在特定的条件下，由角分量的.ts文件中的一个函数定义。下面是我想要做的HTML代码片段： cdkDropList [cdkDropListData]="weisenListweisenList
浏览 11提问于2022-11-01得票数 0
回答已采纳
我是一个新的角度材料拖放功能，所以请容忍我。我不需要在左侧面板列表中排序，只需要在右侧拖放它。当我删除该项目时，我需要在该材料被删除时发生一些更改事件。下面是我的示例代码：
谢谢。
浏览 1提问于2019-09-18得票数 1
1回答
双击角时自动拖放
、、、、
在我的应用程序中，我有两个项目列表，它们可以从一个项目转移到另一个项目，从角度材料转移到另一个项目。 (dblclick)="drop($event)">
<div class="example-box" *ngFor="let
浏览 0提问于2019-04-24得票数 2
回答已采纳
2回答
这是这里关于"cdk dnd“和”嵌套“的第三个问题！下面是我创建的一个非常基本和简单的。所有操作都很好，我可以与容器内的嵌套元素进行交互。当我试图只对嵌套元素排序时，角试图用容器本身对嵌套元素进行排序.这会产生不想要的行为。
有谁知道怎么解决这个问题吗？我明天再做这件事。
浏览 7提问于2019-01-15得票数 15
1回答
我目前正在开发一个angular应用程序，我想要实现一个嵌套的拖放功能，它应该也可以对自己列表中的项目进行排序。有一个很棒的stackblitz示例，如何实现嵌套的drag n‘drop，您可以在其中找到here。因此，基本上我做了一些小的更改，包括拖放时显示占位符，以及将<ul>移动到cdkDrag目录中。，拖放在这里不起作用，但我
浏览 12提问于2020-08-27得票数 0
回答已采纳
我正在尝试使用cdkdrag创建支持拖放的ngb-accordion， 但是当我使用<ngb-panel *ngFor="let content of children; let i = index"cdkDrag [cdkDragData]="content">时 我的拖放什么也没有发生，然后我尝试移动cdkdrag <ng-template ngbPanelHeader>
<div clas
浏览 45提问于2021-07-08得票数 1
3回答
我试图创建拖放到列表组件的角度拖放CDK，如下图所示，但组件没有正确显示。cdkDropListDropped)="drop($event)"> {{item}}
</div>
浏览 8提问于2022-10-03得票数 0
回答已采纳
1回答
我有一个要求，其中我正在使用角度材料进行嵌套拖放组件。所以我必须限制界限。<ul cdkDropList [cdkDropListConnectedTo]="listIds">///
浏览 0提问于2019-12-09得票数 1
我正在编写一个角14应用程序，它包含一个div元素，它使用cdkDrag是可拖动的，并且还有两个按钮来缩放div。因此，在组件中，我保存默认为1的scale版本，并从scale变量中添加缩放按钮add或dec 0.1，我使用带有[ngStyle]="{ transform: 'scale(' + scale + ')' }"的ngStyle定义div的样式，并添加了一个cdkDrag以支持在屏
浏览 17提问于2022-07-07得票数 1
1回答
我使用的角度CDK拖放模块，它很好地工作在html元素，如div，p等。但是，由于某种原因，当我在组件上放置cdkDrag指令时，它无法工作。<div cdkDrag>content</div>
<my-component cdkDrag></my-component>
我注意到的另一件事
浏览 0提问于2019-04-02得票数 1
回答已采纳
1回答
我正在尝试使用角度材质来拖放一个自由节点。这不是列表的一部分，但我想知道项目是什么时候被丢弃的。我不确定如何绑定到此事件。 <svg id="svgCanvas" >
<path [attr.dclick)="nodeClick
浏览 13提问于2019-07-28得票数 3
回答已采纳
如何在有向上或向下按钮的角度材料中改变拖放列表的顺序？所以我想上下移动一个项目。template.html <div class="category" cdkDrag
浏览 0提问于2020-02-20得票数 1
回答已采纳
我可以在列表中添加项目并将其存储在Firestore中，我的应用程序使用Angular拖放(主列表)从firestore加载列表，然后我又有了3次拖放。Drag and Drops实现了从上到下的神奇排列和排序，但是每当我刷新或切换路线时，它都会回到默认位置。然后，每当我将数据从主列表传输到其他3个列表时，它只显示对象、对象
我是Angular的新手，对这一点非常着迷。我已经尝试过使用pre tag命令和其他索引语法，但是无论何时包含firestore
浏览 2提问于2019-08-29得票数 1
我已经为我的角度材料表实现了CdkDrag，每个单元格都是一个输入(mat-form-field)。<mat-cell cdkDropList>
<input cdkDragLockAxis功能是通过cdkDropListEntered发射器工作和完成的。但是，我尝试使用属性CdkDragPreview和CdkDragPlacholder
浏览 23提问于2021-07-01得票数 0
2回答
在我的角度拖放列表中，我想向"cdkDropListEnterPredicate“函数传递一个额外的参数。默认情况下，它会发送一个CdkDrag和CdkDropList，但我有几个下拉列表，所以我只想为它们提供一个enter predicate函数。cdkDropListConnectedTo]="[forwardPlayers]"
<
浏览 31提问于2019-02-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
