Angular，CDK -无法动态创建可拖动元素
Angular是一种流行的前端开发框架，它基于TypeScript构建，并由Google维护。它提供了一种结构化的方法来开发Web应用程序，并且具有许多强大的功能和工具，使开发人员能够构建高性能、可扩展和可维护的应用程序。
Angular的主要特点包括：
- 组件化架构：Angular使用组件来构建应用程序，每个组件都有自己的模板、样式和逻辑，使得应用程序的开发和维护更加简单和可靠。
- 双向数据绑定：Angular提供了强大的双向数据绑定机制，使得数据的变化能够自动反映在视图中，同时用户的输入也能够自动更新数据模型。
- 依赖注入：Angular使用依赖注入来管理组件之间的依赖关系，使得组件之间的通信更加方便和灵活。
- 路由和导航：Angular提供了路由和导航功能，使得开发人员能够构建具有多个页面和导航功能的应用程序。
- 强大的工具集：Angular提供了丰富的工具集，包括命令行工具、调试工具和性能分析工具，使开发人员能够更高效地开发和调试应用程序。
在使用Angular开发应用程序时，可以使用CDK（Component Dev Kit）来实现动态创建可拖动元素的功能。CDK是Angular官方提供的一组可重用的组件和工具，用于构建复杂的Web应用程序。
CDK中的DragDrop模块提供了一套强大的API，用于实现拖放功能。通过使用DragDrop模块，开发人员可以轻松地将拖动和释放行为应用于应用程序中的元素，并根据需要进行自定义。
使用CDK的DragDrop模块，可以实现以下功能：
- 可拖动元素：将DragDrop模块应用于元素后，该元素将具有可拖动的能力。用户可以通过鼠标或触摸操作来拖动该元素。
- 拖动排序：可以使用DragDrop模块来实现元素的拖动排序功能。用户可以通过拖动元素来重新排序它们的位置。
- 拖放交互：可以使用DragDrop模块来实现元素之间的拖放交互。例如，可以将一个元素拖放到另一个元素上，并执行相应的操作。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储等。具体推荐的产品和链接如下：
- 云服务器（CVM）：腾讯云的云服务器产品，提供高性能、可靠的云主机服务。产品介绍链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：腾讯云的云数据库产品，提供高可用、可扩展的MySQL数据库服务。产品介绍链接：https://cloud.tencent.com/product/cdb
- 对象存储（COS）：腾讯云的对象存储产品，提供安全、可靠的云存储服务。产品介绍链接：https://cloud.tencent.com/product/cos
- 人工智能平台（AI Lab）：腾讯云的人工智能平台，提供丰富的人工智能算法和工具，帮助开发人员构建智能应用。产品介绍链接：https://cloud.tencent.com/product/ailab
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。
相关·内容
1回答
当我将一个元素的div更改为下面这样的内容时：<div cdkDrag>I should be draggable</div>，它应该是可拖动的，但它不是。示例：https://stackblitz.com/edit/angular-material2-issue-d1kv8a。 我的angular版本: 7.1.4
浏览 24提问于2019-01-19得票数 1
我希望能够将一个元素从一个列表拖到另一个列表，因此我安装了角cdk模块并遵循。然后我将cdkDropList指令添加到父元素中，其子元素仍然是可拖动的，但是它们的样式在被拖动时不再工作！解决方案
当拖动cdkDropList中的元素时，DragAndDropModule会创建该<em
浏览 5提问于2020-05-02得票数 9
1回答
@转角/cdk/拖放
、、、
在pan缩放元素中，我有使用的可拖动元素。我找到了处理它的，但是我无法复制它，它使用的是JQuery可拖式。有谁知道如何使可拖动的元素保持与鼠标相同的速度时，放大或放大与角-cdk-拖放？
谢谢。
浏览 9提问于2020-09-11得票数 2
我使用的是角度材质CDK，特别是拖放功能，我想知道是否有任何方法可以将其中一个子div设置为不可拖动，同时仍然允许拖动父div？sectionParam"> <div class="sectionContent"> </div> 我想要的是能够拖动整个部分，但仅当拖动的原点来自sectionContent分区时
浏览 161提问于2019-08-29得票数 1
回答已采纳
谁能建议我如何在angular中创建多个可拖动的模态或弹出窗口，因为angular材料不允许多个模态，是否有其他方法可以做到这一点
浏览 89提问于2021-06-22得票数 1
对于我当前的项目，我试图实现拖动元素，一个位置到一个div中的另一个位置。为此，我使用了Angular Material 7CDK的拖放功能。它在整个页面上拖动，但只想在特定的div中拖动。但我在Angular Material 7CDK拖放中看不到任何控制边界的选项。谢谢。
浏览 5提问于2018-12-13得票数 1
我在materials中使用了服务，因为我使动态创建的组件可拖动。createDrag函数返回一个具有函数withPlaceholderTemplate的DragRef对象。经过进一步的研究，我在node_modules@angular\cdk\typings\drag-drop\drag-ref.d.ts中找到了一个接口，如下所示 viewContainer: Vi
浏览 0提问于2020-03-23得票数 0
4回答
是否可以使角度材质对话框可拖动？我安装了angular2-draggable，当然可以在所有其他元素上使用该功能。但是因为对话框是动态创建的，所以我不能在特殊元素上使用ngDraggable，也不能使用模板变量。
浏览 3提问于2017-11-27得票数 42
我正在开发一个POC应用程序，我正在努力使MdDialog组件正常工作。有谁有传递给MdDialog open方法的示例吗？角2材料：
浏览 5提问于2015-12-10得票数 34
5回答
如何改变角CDK的z指数？
、、、、
我遇到的问题是，一旦我在对话框中拖动一个可拖动的元素，该元素就会消失在对话框后面。放下它后，它会重新出现在正确的位置上。在屏幕截图中，我将"AAAA“元素从列表中拖出--它消失在对话框后面。
我假设这个问题可以通过修改z索引来解决，但我不知道如何将它应用于“拖放”元素。
浏览 17提问于2020-04-03得票数 15
回答已采纳
我在使用Angular CDK中的拖放模块时遇到了一个问题。我在一个容器div中使用它，该容器div具有以下CSS属性： display: flex;
flex-wrap: wrap; 这里有flex_wrap属性，这样如果包含的可拖动元素不适合容器，它们就会换成第二行由于拖动是水平的(cdkDropListOrientation="horizontal")，当所有元素都适合在一行中时，这很好用，但一旦它们换行到第二行，拖放就会出现错误。我做了下面的
浏览 89提问于2019-01-24得票数 12
回答已采纳
5回答
使用Material库中的拖放行为，我试图在拖动cdkDrag元素时更改光标。
通过读取来设置拖放组件的样式，向该类添加一个游标属性应该可以做到这一点：
.example-box { cursor: gr
浏览 0提问于2018-12-07得票数 11
回答已采纳
我在angular ui-view中使用jsPlumb社区版有问题。有没有人对此有经验--如何在angular ui-view中使元素与jsPlumb连接？
感谢您的回复:-)
浏览 0提问于2016-12-06得票数 0
2回答
一个是卡片列表(多个可拖动的元素)，另一个是只有一个元素的卡片查看器，大小是两个元素的两倍。用户可以将卡片从列表中拖到查看器上，以获得更好的视图。在动画上放置一个非常长的计时器以使我能够检查它时，我可以看到以下DOM元素：如您所见，我们有两个元素<
浏览 6提问于2019-11-26得票数 2
回答已采纳
使用@angular/cdk7.2.1:如果定义一个包含cdkDropList和cdkDrag组件嵌套列表的父组件，则在嵌套子组件中定义cdkDragHandle将不起作用。https://stackblitz.com/edit/angular-wfvmuj?
浏览 75提问于2019-02-20得票数 10
回答已采纳
我能够将拖动能力添加到元素中，但是创建了一个下拉列表功能失败了：import {DragDrop, CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
@Component({select
浏览 0提问于2019-06-21得票数 2
2回答
如何更改可拖动元素的文本，在拖动时，我从cdk/拖放库中获得了代码片段。它提供了参数来捕捉事件，同时，拖动。我可以通过原生元素进行更改，但它会更改所有样式，而且我还需要在拖动或其他操作上设置另一个事件。如果我想在拖动元素上放置随机文本，有哪些选项？
浏览 20提问于2020-04-15得票数 0
2回答
角材料嵌套拖落
、、
我正在尝试实现一个可重新排序的列表组，其中包含可以在列表之间移动的元素，使用@角/cdk/拖放，尽管我遇到了一些问题。我已经成功地分别创建了单独的示例，这些示例实现了单独的拖放，尽管当将它们结合在一起时，我似乎不能并行地实现这两个功能。在组间移动项：和：
在和示例中，单个项的拖动似乎与预期的一样，但是组的重新排序不起作用，但是，当cdk-drag-drop-connected-sorting-group-example.html的第4行移动到父<<
浏览 1提问于2019-01-07得票数 16
回答已采纳
3回答
我目前正在做一个Angular项目。我将Angular material中的MatDialog与drag and drop的Angular模块一起使用。我想防止对话框被拖到屏幕窗口之外。
浏览 57提问于2019-12-20得票数 4
回答已采纳
2回答
角7-带母可下垂容器的拖拽
、、、、
我正在尝试使用新的角7 CDK拖放来移动我的站点中动态添加的元素列表。
使用 (摘自角度文档示例并根据我的需要进行了修改)，您可以看到我有一个带有可下垂容器的元素列表。问题是，当从另一个组件生成可拖放元素时，它们不会将父可下垂作为引用的可下垂容器使用。相反，CDK拖放对象中的可下垂容器属性是null。我尝试将cdkDragRootElement属性设置为CdkDrag指令，以检查是否可以引用父元素，但它会使元素移动整个父元素<
浏览 0提问于2018-10-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
