cdkDragFreeDragPosition位置取决于之前的每个cdkDrag元素
cdkDragFreeDragPosition是Angular Material中的一个指令，用于控制可拖拽元素的位置。它的位置取决于之前的每个cdkDrag元素。
具体来说，cdkDragFreeDragPosition指令可以在可拖拽元素上应用，以便在拖拽过程中自由调整元素的位置。它允许元素在拖拽期间沿水平和垂直方向自由移动，而不受任何约束。相反，如果没有应用cdkDragFreeDragPosition指令，拖拽元素将会被限制在一个预定义的位置上。
cdkDragFreeDragPosition指令主要有以下几个特点和应用场景：
- 自由位置调整：通过应用cdkDragFreeDragPosition指令，可拖拽元素可以在拖拽期间以自由的方式调整位置，不受任何限制。
- 灵活布局：在某些情况下，需要自定义可拖拽元素在拖拽过程中的布局。通过应用cdkDragFreeDragPosition指令，可以更灵活地控制元素的位置，以实现特定的布局需求。
- 动态排列：在动态生成可拖拽元素的场景中，可能需要根据之前元素的位置动态调整新元素的位置。通过使用cdkDragFreeDragPosition指令，可以方便地根据前面元素的位置来确定新元素的位置。
腾讯云的相关产品中，暂时没有特定与cdkDragFreeDragPosition指令相关的产品或服务。但可以利用腾讯云的服务器less服务SCF（Serverless Cloud Function）结合Angular Material中的cdkDrag指令来实现自由拖拽元素的功能。具体使用方法和示例可以参考腾讯云SCF的文档和Angular Material的官方文档。
相关链接：
- 腾讯云SCF产品介绍：https://cloud.tencent.com/product/scf
- Angular Material官方文档：https://material.angular.io/components/sidenav/overview
相关·内容
当我在页面上添加几个cdkDrag元素时，它们的位置取决于前一个元素。在我的屏幕上，如果我将"Item 3“移动到容器的0x0，"Item 3”坐标将是-250x0。所以问题是:如何使每个元素的位置独立于之前的元素？例如，如果我为所有元素设置x:0，y:0，则每个元
浏览 60提问于2019-10-01得票数 1
回答已采纳
2回答
在我的应用程序中，我有多个行，其中的行是“块”，可以在完全工作的行之间拖动。
例如，我希望蓝色“块”使用cdkDragDrop从紫色块的末尾开始。
浏览 5提问于2020-11-06得票数 2
回答已采纳
我想把盒子的位置放在灰色区域。我该怎么做呢？timeline"> cdkDragBoundary="#timeline" id="timelineBox"
浏览 0提问于2020-03-11得票数 0
谁能建议我如何在angular中创建多个可拖动的模态或弹出窗口，因为angular材料不允许多个模态，是否有其他方法可以做到这一点
浏览 89提问于2021-06-22得票数 1
1回答
]="dragNominativePosition" > </div> (cdkDragEnded)="dragEnd($event)" id="nominative" [cdkDragFreeDragPosition</
浏览 28提问于2021-11-03得票数 0
2回答
CdkDrag更新位置
、、、、
我有多个CdkDrag元素，它们是从组件中的数组的ngFor循环中呈现出来的。当我移除一个元素时，我会拼接数组。然后，一些元素将更新那里的位置。我该怎么避免呢？在删除其中一个拖放元素之前，我试图获取所有可拖动元素的freeDragPosition，然后重置它们的位置，但是它没有工作。cdkDragBoundary="#
浏览 6提问于2019-10-17得票数 7
回答已采纳
更具体地说，我有多个cdkDropList，每个都有一个cdkDrag： <div cdkDropList [cdkDropListConnectedTo]="all_lists"> content </div>当我从列表中移动一个元素</e
浏览 47提问于2020-06-06得票数 4
回答已采纳
cdkDropListData]="widgetsDrawer" cdkDragwidget-container> *ngFor="let widget of widgetsOnDesktop; let widgetIndex = index;"
cdkDrag[widgetIndex
浏览 3提问于2021-04-23得票数 0
回答已采纳
1回答
我使用的是角材料7的，我正在努力弄清楚如何使用。
元素，该元素将用作拖动CdkDrag的占位符的模板。占位符将显示在要拖动的元素的位置。ng-templatecdkDragPlaceholder
<div class="example-box" *ngFor="let movie of mov
浏览 0提问于2019-02-06得票数 2
回答已采纳
我已经为我的角度材料表实现了CdkDrag，每个单元格都是一个输入(mat-form-field)。<mat-cell cdkDropList>
<input cdkDragLockAxis功能是通过cdkDropListEntered发射器工作和完成的。但是，我尝试使用属性CdkDragPreview和CdkDragPlacholder
浏览 23提问于2021-07-01得票数 0
1回答
同一元素上的CSS冲突转换属性
、、、、
我正在设计一个UI，允许用户拖放一个框(红色轮廓)来确定它在屏幕上的位置(黑框)。 UI 也可以通过更改右侧的输入来移动它。我使用Angulars cdkDrag来实现拖放功能，它应用了一个 transform: translate3d(x, y, z) 移动框(我使用事件侦听器更新右侧的输入值)。不幸的是，当再次拖动该框时，Angular会重新应用translate3d，从而创建两个相互冲突的属性，从而在用户输入后拖动时创建糟糕的用户体验。
浏览 19提问于2021-02-10得票数 1
回答已采纳
1回答
角CDK拖放边界
、、
我有一个关于角7 CDK拖放特性的问题。我想要的是:在容器中需要一个可调整大小的矩形div，作为拖放的边界元素(cdkDragBoundary)。所以这很简单。)" </div>矩形是绝对定位的，所以我使用width和left属性来调整大小和位置问题:只要我不改变矩形
浏览 0提问于2019-03-11得票数 1
回答已采纳
我在扩展角的拖放功能 <div cdkDrag>item 1</div> <div cdkDrag>item 3</div>我的appEnhancedDropList指令需要访问包含在cdkDropList中的
浏览 6提问于2022-05-12得票数 1
1回答
我使用的角度CDK拖放模块，它很好地工作在html元素，如div，p等。但是，由于某种原因，当我在组件上放置cdkDrag指令时，它无法工作。<div cdkDrag>content</div>
<my-component cdkDrag></my-component>
我注意到的另一件事是，角上的
浏览 0提问于2019-04-02得票数 1
回答已采纳
我已经创建了两个div，一个包含图像，另一个是空的。我想将该图像从一个div拖放到另一个div。在这里，我使用了cdk拖放和cdkDragFreeDragPosition属性，但我对此并不满意，因为我正在寻找更像下面这样的effect <div class="example-container"><h1>From</h1>
id = "pic1">
&l
浏览 55提问于2020-10-23得票数 0
示例： ...我知道您可以传递dragRef并获得元素的getBoundingClientRect以获得x，但是一旦将它传递到cdkDragConstrainPosition位置并更改元素的位置，它就不再工作了。如何每30 an移动一个内部元素..。而不是元素开始的
浏览 8提问于2021-12-16得票数 2
3回答
嗨，我需要能够拖放一些html元素，但我需要知道的结束位置的下降。<div cdkDrop> ...other stuff</div>dragEnd(event
浏览 1提问于2019-01-31得票数 15
回答已采纳
我试图根据容器内的位置来得到盒子的x和y位置。是来自的一个例子。 <div class="example-box" cdkDrag cdkDragBoundary=".something" (cdkDragMovedaround<&#x
浏览 0提问于2019-04-29得票数 2
如果我拿掉cdkDropList，检查器就会移动并保持在我移动的位置。如果我添加cdkDropList，它就会移动，然后回到原来的位置。任何关于如何修复它的想法都将不胜感激。>
<img loading="lazy" *ngIf="item.img" id={{i}} class="checkerImg" src={{item.img}} cdkDrag
浏览 8提问于2022-07-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
