CSS flexbox中的Angular CDK拖放问题
CSS flexbox是一种用于布局和排列元素的弹性盒子模型。它提供了一种灵活的方式来创建响应式的网页布局。Angular CDK（Component Dev Kit）是Angular团队提供的一组可重用的组件和工具，用于构建丰富的Web应用程序。
在使用CSS flexbox布局时，Angular CDK拖放可以用于实现元素的拖放功能。它提供了一套API和指令，使得在应用程序中实现拖放操作变得简单和灵活。
优势：
- 灵活性：CSS flexbox和Angular CDK拖放都提供了灵活的布局和拖放功能，可以适应不同的屏幕尺寸和设备。
- 响应式布局：CSS flexbox可以根据屏幕大小和设备类型自动调整布局，使得网页在不同的设备上都能良好地显示。
- 可重用性：Angular CDK拖放提供了一套可重用的组件和指令，可以在不同的应用程序中轻松实现拖放功能。
应用场景：
- 网页布局：CSS flexbox可以用于创建响应式的网页布局，使得网页在不同的设备上都能良好地显示。
- 拖放功能：Angular CDK拖放可以用于实现元素的拖放功能，例如拖动列表项进行排序或拖动元素到特定区域进行操作。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。
相关·内容
我在使用Angular CDK中的拖放模块时遇到了一个问题。我在一个容器div中使用它，该容器div具有以下CSS属性： display: flex;
flex-wrap: wrap; 这里有flex_wrap属性，这样如果包含的可拖动元素不适合容器，它们就会换成第二行由于拖动是水平的(cdkDropListOrientation="horizontal")，当所有元素都适合在一行中时，这很好用，
浏览 89提问于2019-01-24得票数 12
回答已采纳
我尝试将内联div放在第一行中。我没能内联它们。 如果有人能告诉我如何做，我将不胜感激。下面是stackblitz示例：https://stackblitz.com/edit/angular-ry9yry <mat-grid-list cols = "4" rowHeight = "80px
浏览 6提问于2019-04-06得票数 0
回答已采纳
1回答
我试图添加拖放能力到我的名单使用角材料CDK拖放。然而，当我删除一个项目时，它的柔性盒对齐就会丢失，并且它的显示方式也会有所不同。最上面的项目是在它被丢弃之后，而底部是之前。我发现了几个可能相关的问题：
任何帮助都很感激。
浏览 3提问于2020-05-14得票数 1
回答已采纳
我有一个Angular 7应用程序，并在其中拖放angular cdk以重新排列列表。拖放工作正常，但它不能自动滚动div容器。有没有办法在不更新angular/cdk版本的情况下让自动滚动工作，按照这个链接StackBlitz：
浏览 17提问于2020-06-02得票数 0
2回答
拖放在@角/cdk中找不到
、、、、
我试图在我的角6应用程序中添加拖放功能，我试图使用角材料，我想使用。我遵循了指令，但我无法使用“@ar角/cdk/拖放”，我试着安装了下面的软件包
拖放在我的项目中是不可用
浏览 0提问于2019-03-23得票数 7
回答已采纳
我正在尝试使用新的@angular/cdk，但位置策略似乎不起作用，只想显示一个以背景为中心的模式，我知道我可以为窗格设置一个类，并在那里设置固定的位置，但在这种情况下，我不知道什么是positionStrategy配置，我想尽可能地适应@angular/cdk的功能。
浏览 31提问于2018-07-24得票数 0
回答已采纳
我正在尝试使用拖动材质CDK过滤项目列表...当我的列表没有被过滤时，一切都运行得很好，但是当我过滤它，并拖放时，我在拖放上得到了错误的项目(错误的索引)，我创建了一个工作示例，正如你所看到的，通过"av“进行过滤，并将鳄梨拖到拖放区域，当索引引用旧的数据源时，你将得到胡萝卜，任何想法都是值得感谢的， 下面是这个问题的一个工作示例：https://st
浏览 37提问于2019-10-25得票数 3
回答已采纳
2回答
角7减阻换向元件
、、
我试图使用新的角7 CDK拖放来移动元素列表。但是没有找到任何交换元素的选项，给出的所有示例都是用于对元素排序的。cdk-drag-drop-sorting-example.htm
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($eventimport {Component} from '@angular/core
浏览 0提问于2019-06-19得票数 6
关于angular的cdk包的问题:只有当拖放条件为真时，我才会将红色div "drag me“(如下所示)拖放到蓝色拖放区域。app.component.html
import { Component }
浏览 2提问于2019-04-01得票数 1
我正在为一个项目使用Angular 7，并且我想使用拖放功能。话虽如此，我在这里有什么选择？如果不安装Angular Material，我可以不安装drag n drop功能吗？
如果是这样，我最好的选择是什么？
浏览 0提问于2019-01-31得票数 4
1回答
我正在尝试使用Angular的CDK拖放功能，它工作得很好，但是我找不到关于如何捕捉到网格的文档。
我发现了一个GitHub问题，该问题表明已经添加了此功能。这就是我想通过CDK的拖放来实现的。
浏览 68提问于2021-02-10得票数 3
当使用@angular/cdk/ Drag -drop模块(Angular材质拖放)...有没有办法限制drop容器，使其只接受一个值而不是多个值？我正在使用的标准示例代码来实现，但是找不到可以限制拖放项目数量的解决方案，第二，找不到保持拖拽列表相同的解决方案(拖拽的项目将留在拖放容器中)，因此您可以复制项目而不是移动项目到拖放容器。example-box&qu
浏览 9提问于2019-11-27得票数 4
2回答
如何从扩展面板中拖放元素，元素应该显示在扩展面板中，即使它被拖放。我需要7号角的代码。我试图拖放列表中的元素，但拖拽后的元素不会显示在列表中。from '@angular/cdk/drag-drop';
* @title Drag&Drop connec
浏览 9提问于2019-09-19得票数 0
我在应用程序中使用@angular/cdk/drag-drop模块。拖放按预期工作，但当拖放项位于拖放区域的顶部时，我想要执行一些操作。</span> console.log('ondragover');在@angular/cdk/drag-drop中有任何内置的方法来实现这
浏览 6提问于2020-07-05得票数 2
回答已采纳
我正在尝试用角CDK构建一个可重用的工具提示指令。下面是一个简单的演示实现：
然而，我的定位不能正确地工作。角cdk覆盖容器在目标元素下面打开，并且将其相对于指令主机元素定位不起作用。
浏览 4提问于2020-08-08得票数 1
我在一个mat-radio元素的触发器打开的sidenav中使用了来自cdk的虚拟滚动，这是关于代码的： ts - ..._options = this.options;} 模板- <cdk-virtual-scroll-viewport itemSize="30" class="scroll-viewport"> 当然还有适当的css。任何时候，当上面的组件因为一个已知的
浏览 10提问于2019-09-25得票数 0
我用一个按钮打开一个角度对话框来显示所有的主题，在对话框中我列出了该主题的所有颜色，这些颜色可以重新排序@angular/cdk/drag-drop。 如果我有一个只有2-4个主题的列表。我能够重新排序所有的颜色为每个主题没有问题。但是如果我有一个包含20-30个主题的列表。只有第一个主题可以正常工作，我可以打开对话框并重新排序项目，但如果我选择了最后一个项目，拖放不起作用。我尝试调试该错误，发现当重新排序不起作用时，前一个索引和当
浏览 15提问于2019-04-24得票数 9
2回答
如何正确设置角拖放？
、、、、
看我的脚步从‘@/cdk/拖放’导入{ DragDropModule }的app.module.ts ->中的；以及导入：->import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, mov
浏览 1提问于2020-08-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
