在@angular/cdk/拖放中使用cdkDragFreeDragPosition平滑移动到x和y位置
在@angular/cdk/拖放中使用cdkDragFreeDragPosition平滑移动到x和y位置，可以通过以下步骤实现：
- 首先，确保你已经安装了@angular/cdk库。如果没有安装，可以通过运行以下命令进行安装：
- 首先，确保你已经安装了@angular/cdk库。如果没有安装，可以通过运行以下命令进行安装：
- 在你的组件中引入所需的模块：
- 在你的组件中引入所需的模块：
- 在组件类中定义一个变量来存储x和y位置的值：
- 在组件类中定义一个变量来存储x和y位置的值：
- 在HTML模板中，使用
cdkDrag指令来标记可拖动的元素，并绑定cdkDragFreeDragPosition指令来实现平滑移动： - 在HTML模板中，使用
cdkDrag指令来标记可拖动的元素，并绑定cdkDragFreeDragPosition指令来实现平滑移动： - 在组件类中，可以通过修改
position变量的值来控制元素的平滑移动。例如，将元素移动到x为100，y为200的位置： - 在组件类中，可以通过修改
position变量的值来控制元素的平滑移动。例如，将元素移动到x为100，y为200的位置： - 这将使元素平滑地从当前位置移动到指定的位置。
在这个场景中，腾讯云没有直接相关的产品或者产品介绍链接地址。但是，腾讯云提供了一系列云计算服务，如云服务器、云数据库、云存储等，可以帮助开发者构建和部署各种应用。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的信息。
相关·内容
我正在用Angular 10创建一个实时系统，用户1在屏幕上拖动项目，项目的位置在用户2屏幕上更新。为此，我使用了@angular/cdk/drag-drop。我通过将cdkDragFreeDragPosition绑定到对象的xPos和yPos属性来更新用户2屏幕上的位置，这些属性在用户1删除对象时更新： [cdkDragFreeDragPosition]="{x: w
浏览 59提问于2020-09-08得票数 0
回答已采纳
我使用角度材料拖放cdk (参考：)。拖放工作正常，但当我尝试使用cdkDragFreeDragPosition预设其x-y坐标时，它显示错误：下面是我的模块：
import { Dr
浏览 2提问于2020-12-28得票数 0
1回答
我使用@angular/cdk/drag-drop拖放父div中的两个子div：<div class="badge-container" id="badge"> dragNominativePosition = {x: 0, y: 50};
dragCompanyPosition = {x:0, y<
浏览 28提问于2021-11-03得票数 0
谁能建议我如何在angular中创建多个可拖动的模态或弹出窗口，因为angular材料不允许多个模态，是否有其他方法可以做到这一点
浏览 89提问于2021-06-22得票数 1
我想将该图像从一个div拖放到另一个div。在这里，我使用了cdk拖放和cdkDragFreeDragPosition属性，但我对此并不满意，因为我正在寻找更像下面这样的effect <div class="example-container">]="dragPosition">
<img width="350px" height="250px" src="htt
浏览 55提问于2020-10-23得票数 0
2回答
在我的应用程序中，我有多个行，其中的行是“块”，可以在完全工作的行之间拖动。
例如，我希望蓝色“块”使用cdkDragDrop从紫色块的末尾开始。
浏览 5提问于2020-11-06得票数 2
回答已采纳
我正在将一个应用程序从angularjs迁移到Angular 7。我有一个地图工具，可以在网格上跟踪游戏棋子。现在它是如何工作的，我监听每个游戏棋子上的拖放事件，并在拖放事件上更新游戏棋子在数据库中的x/y位置。我在这里看着https://material.angular.io/cdk/drag-drop，看起来我不能重新创建那个功能。当我试图在cdkDropList
浏览 22提问于2019-04-11得票数 1
回答已采纳
2回答
我在一个包含position: relative的容器中有一个包含position: absolute的<div>元素。它的left和top属性绑定到component.ts中的数据X和Y。我的目的是使用cdk拖放在我的容器中移动div。在dragEnded事件中，我检索了更新坐标X和Y所需的数据，于是问题就开始了……
<div
浏览 0提问于2020-04-11得票数 1
我有一个自由看相机在一个位置时，游戏斯拉特。我更改了MiddleRig的高度和半径，以及Y和屏幕Y上的MiddleRig跟踪对象偏移量。
但我如何在游戏中做到它自己，这样相机就会改变所有的位置/s和高度/半径慢慢平滑？我应该通过脚本修改摄像机属性的所有值吗？或者以某种方式使用时间
浏览 7提问于2020-09-02得票数 0
1回答
我正在寻找正确的方式，以正确的方式滚动在一个页面，将加载动态信息。</div> 我的问题是，我想使用angular路由器滚动到一个锚点，但这个锚点目前还不存在，因为加载还没有完成。
浏览 26提问于2021-09-17得票数 1
回答已采纳
角CDK拖放和缩放CSS-属性“transform:scale(0.5)”并不像预期的那样工作。
浏览 0提问于2020-06-03得票数 6
回答已采纳
2回答
我可以很好地在屏幕上拖动它，但我想要做的是，当标签在一个区域内时，我希望它停止拖动，并使其平滑地移动到该区域内的指定点。因此，如果它的x值大于150，则将其移动到x为200，y为150lab
浏览 0提问于2013-06-07得票数 1
回答已采纳
3回答
因此，我在沙箱中工作，以模拟应用程序的环境，我希望实现这个拖放。不好意思，这么多话，但我真的想确保我正确地解释问题，因为我已经看到了几个旧的帖子，在这个问题上，要么没有回答或回答错误的问题。短版诀窍似乎是，cdk拖放自动滚动功能只对整个窗口大小起作用，或者，如果它是一个固定高度的我编写了自己的自动滚动功能，它根据鼠标的屏幕位置滚动div，当一个元素被
浏览 2提问于2020-02-18得票数 4
我用的是材料拖放。我正在寻找的结果是从列表中克隆一个项目，并将其放入另一个列表中，这个列表在视觉上是一个区域，但这是“捕捉”，在该区域保留掉的“坐标”(x，y)。; let widgetIndex = index;" [widgetIndex]="widgetIndex" [cdkDragFreeDragPosition</em
浏览 3提问于2021-04-23得票数 0
回答已采纳
2回答
CdkDrag更新位置
、、、、
我有多个CdkDrag元素，它们是从组件中的数组的ngFor循环中呈现出来的。当我移除一个元素时，我会拼接数组。然后，一些元素将更新那里的位置。我该怎么避免呢？在删除其中一个拖放元素之前，我试图获取所有可拖动元素的freeDragPosition，然后重置它们的位置，但是它没有工作。/core';
import {CdkDrag, CdkDragEnd} from '@angular/cdk/drag-drop'
浏览 6提问于2019-10-17得票数 7
回答已采纳
3回答
嗨，我需要能够拖放一些html元素，但我需要知道的结束位置的下降。 ...other stuff</div>dragEnd(event: CdkDragEnd) {}
在控制台中你知道这样的数据或其他我可以使用的东西是否以某种方式被暴露了吗？
浏览 1提问于2019-01-31得票数 15
回答已采纳
4回答
角7 CDK中卷轴的拖放干扰
、、、、
我有一个Ionic应用程序，它是构建在角，因此有角cdk拖放在它重新排列一个列表。拖放效果很好，但是，在手机上，我根本不能滚动。我相信拖放手势正在吞噬我的卷轴手势。是否可以使用角cdk在移动环境中滚动并执行拖放操作？
浏览 1提问于2019-03-19得票数 8
回答已采纳
我正在尝试使用angular中的cdkDragDropModule来创建表格布局，我从数据库中获取表格对象，并将表格对象预加载到拖放容器中的正确位置。_id}}" (click)="orderScreen(table)"
[cdkDragFreeDragPositionthis.initiali
浏览 80提问于2021-02-08得票数 0
回答已采纳
我试图在闪存中做一个小的拖放应用程序，我已经实现了以下目标-2)确保两个动唇在互相放置时不交换位置我正在添加下面的拖放代码，请在这里指导我-数组来保存目标实例、拖放实例和拖放实例的起始位置。，并将拖放实例的起始x和</
浏览 0提问于2014-08-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
