首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是否可以在cdkDropList中停止项目排序并获取子项的XY坐标?

在Angular中,cdkDropList是一个用于实现拖放功能的指令,它允许我们在一个容器中拖动和重新排序项目。当我们需要停止项目排序并获取子项的XY坐标时,可以通过以下步骤实现:

  1. 首先,确保你已经在项目中引入了Angular CDK(Component Dev Kit)库,它包含了cdkDropList指令。
  2. 在HTML模板中,使用cdkDropList指令创建一个拖放容器,并绑定一个事件处理函数来处理排序停止事件。例如:
代码语言:txt
复制
<div cdkDropList (cdkDropListSorted)="onSortStop($event)">
  <div cdkDrag>Item 1</div>
  <div cdkDrag>Item 2</div>
  <div cdkDrag>Item 3</div>
</div>
  1. 在组件的Typescript代码中,实现onSortStop事件处理函数。在该函数中,可以通过event参数获取到排序停止的相关信息,包括子项的XY坐标。例如:
代码语言:txt
复制
import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';

onSortStop(event: CdkDragDrop<any>) {
  const dropList: CdkDropList = event.container;
  const itemIndex = event.currentIndex;
  const itemElement = dropList.element.nativeElement.children[itemIndex];
  const itemX = itemElement.getBoundingClientRect().left;
  const itemY = itemElement.getBoundingClientRect().top;

  console.log('Item X:', itemX);
  console.log('Item Y:', itemY);
}

在上述代码中,我们通过event参数获取到了拖放容器的实例dropList,以及当前拖放项目的索引itemIndex。然后,通过itemElement.getBoundingClientRect()方法获取到子项的位置信息,包括left和top属性,即XY坐标。

  1. 至此,我们已经成功停止了项目排序并获取到了子项的XY坐标。你可以根据具体需求,进一步处理这些坐标数据,例如保存到数据库或进行其他操作。

需要注意的是,以上代码示例中并未提及具体的腾讯云产品,因为在这个问题的背景中要求不提及云计算品牌商。但是,腾讯云也提供了一系列云计算相关的产品和服务,可以根据具体需求选择适合的产品来支持你的应用。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vcl控件详解_c++控件

与上面的区别是事件可以得到它新值和单击是向上还是向下按钮 onClick:单击按钮时触发 THotKey 属性 HotKey:设置或获取热键 InvalidKeys:设置不允许有哪些热键...资源名字 StartFrame:开始帧 StopFrame:停止帧 Timers:设置是否返回一个时间消息 方法  CanAutoSize:调整新大小,返回是否允许 Play...,状态位图作为附加图像显示项目图标的左边 ToolTips:指定在该控件项目是否有工具提示 TopItem:指定最顶层节点 方法  AlphaSort:以字母顺序排序节点,成功返回为真...:绘制组件子项目期间不同状态触发 OnChange:当列表项目改变时触发 OnChanging:当列表项目正在改变时触发 OnColumnClick:当单击列时触发 OnColumnDragged...OnCustomDrawItem:当必须绘制列表中一个项目时触发 OnCustomDrawSubItem:当必须绘制列表中一个子项目时触发 OnData:当一个项目列表视图组件显示前立即发生该事件

4.9K10

18.Llinux-触摸屏驱动(详解)

引脚说明: YM: (Y Minus)触摸屏Y坐标的负线,也可以用Y -表示 YP : (Y Power)触摸屏Y坐标的正线, 也可以用Y+表示 XM: (Y Minus)触摸屏Y坐标的负线, 也可以用...位用来标志笔尖是按下还是松开) 5.2 获取XY坐标时使用是自动 X/Y 方向转换模式 当ADC转换成功,  X 坐标值到 ADCDAT0 和 Y 坐标值到ADCDAT1 后,就会产生INT_ADC中断...XY自动转换模式,启动一次ADC转换,ADC转换成功,会进入ADC中断 6.4 IRQ_ADC中断函数: 1)获取ADCDAT0位[9:0],来算出XY方向坐标值 2)测量n次值保存在数组,然后再次设置为...XY自动转换模式,启动ADC (PS:要启动ADC转换之前必须设置一次XY为自动转换模式,不然获取数据会不准) 3)采集完毕,使用快速排序将n次值排序后,以最小值为基准,如有误差非常大数,则舍弃,如果没有则打印数组中间值...IRQ_TC) (PS:ADC采样模式下是判断不到ADCDAT0bit15位,因为ADCDAT0已被自动设置为X坐标的采样值) 5)设置定时器10ms超时时间 6.5 定时器超时函数: 1)判断

3.4K91
  • 用python做一个贪吃蛇游戏_免费贪吃蛇试玩游戏

    ,则游戏失败; (4)可穿墙模式,贪吃蛇可以穿过墙面,但咬到自身后,游戏失败。...3.4 time库 time库是Python处理时间标准库,用于计算机时间表达,提供获取系统时间格式化输出功能,提供系统级精确计时功能,也可用于程序性能分析。...4.2.3 die_snake()函数 正常模式下贪吃蛇死亡判断函数,传入形参为贪吃蛇蛇头和蛇身坐标数据。该函数设置布尔型变量die_flag,若死亡设置为Ture返回,没有死亡为False。...该函数设置布尔型变量die_flag,若死亡设置为Ture返回,没有死亡为False。通过遍历蛇身存储列表,判断蛇身坐标是否与蛇头坐标相同,若相同则判定贪吃蛇咬到自身,死亡。...该函数中进行结束界面窗体初始化,在窗体显示玩家最终得分,并在改函数调用pygame库quit方法,使该库停止工作。

    51420

    可视化技能之Matplotlib(下)|可视化系列02

    ()把动画转为HTML5下video标签支持数据或用.to_jshtml生成HTML表示动画数据,例如在jupyter notebook环境可以用以下语句直接渲染出带播放控制台动图。...网上可以找到各种年度季度排名公开数据集,一些讲动态排序教程也给出了数据集。为了再降低数据获取门槛,我们直接随机生成简单排名数据。 ?...因此正序排序后正好是最高最上面,不需要额外调转,具体代码如下。...接口中有图像读取接口,ax.imshow(mpimg.imread('imagename.png'))可以读取图片显示,因此Matplotlib即能画饼柱折点等图形,也能画更底层线段、楔形、多边形...,例如饼图可以认为是极坐标系下柱状图,将柱高度映射为楔形弧度;玫瑰图可以是极坐标系下堆积柱状图,柱高度映射为r及弧度theta占比;雷达图可以是极坐标系下折线图。

    1.5K21

    数据结构与算法-拓扑排序

    工程实践,一个工程往往由若干个子项目组成,这些子项目中往往有两种关系。 1. 先后关系,即必须在一个子项目完成后,才能开始实施另一个子项目。 2....子项目间无关系,即两个子项目可以同时进行,互不影响。 为了保证总项目的顺利进行,必须要对这些子项目进行一定先后顺序规化,为了解决这类问题,我们可以采用拓扑排序方法。 1....拓扑排序 若在有向图G,从顶点Vi到Vj有一条路径,则在拓扑序列顶点Vi必须排在Vj之前,一个有向图中,将所有顶点按这个规则进行拓扑序列过程称为拓扑排序。...完成拓扑排序前提是AOV网不允许出现回路。 下面给出有向图拓扑排序基本步骤。 1. 从有向图中选择一个入度为0顶点,输出该顶点; 2....重复执行上面这两步操作,直到所有入度为0顶点均被输出,或者图中再也没有入度为0顶点,拓扑排序完成; 可以证明,任何一个无环有向图,其全部顶点可以排列成一个拓扑序列。

    72510

    公交线路数据获取脚本分享

    公交、地铁线路数据,可以用于交通运输、公共服务水平分析等各个领域,是规划相关工作较为常用数据。 该脚本数据获取逻辑是: 1. 调用高德地图公交线路搜索端口 2....处理保存数据导入ArcGIS,生成公交线路 “预先获取公交线路名称”需要结合先前分享POI数据获取脚本、POI数据多场景获取脚本,当然也可以手动输入。...AcrMap执行Excel转表(线路点位(“*PathDraw”)、站点点位(“*Stop”)),之后数据管理工具-图层和表选项-创建XY图层 2....绘制线路:ArcToolBox-数据管理工具-要素-点集转线,输入XY图层要素选择线路点位,排序选择order字段 4....”坐标转换代码来自网络,原项目地址:https://github.com/zhoujungis/amap_poi_scrapy,原作者联系方式zhoujunseu@163.com 3、 最后会生成三类表格

    2.4K20

    Android——MPAndroidChart折线图柱状图饼形图使用

    这里仅给出折线图使用方法,柱状图和饼形图使用基本类似,官方GEMO即可找到,不再赘述了,文末会给出柱状图和饼形图使用效果展示。...一、折现图初始化       入参为折线图对象和自定义XY坐标轴数据,初始化相关属性注释中都已给出,这里主要单独说明下如何自定义XY坐标轴、如何点击折线图中数据显示数据标签。...,创建对象时即输入坐标单位,通过重写方法getFormattedValue方法获取Y轴自定义数据+单位,如原始数据是10,返回是10Min,即Y坐标轴显示是10Min。...} 二、折现图设置数据 输入参数为折线图对象和自定义XY坐标轴,因折线图设置数据需要有固定格式,MyAndroidChart使用Entry键值对,xy值都为浮点型数据,所以需要将我们自定义XY坐标轴数据转化为对应键值对形式...,Entryx key按序号从0开始递增,y value值即是我们要显示y轴自定义数值,实际上我们上一节定义X轴类可以看到获取X轴数据就是通过0开始序号对应获取我们自定义

    3.4K30

    浅谈什么是图拓扑排序

    1 引言   工程实践,一个工程项目往往由若干个子项目组成。这些子项目间往往有两种关系:   (1) 先后关系,即必须在某个项完成后才能开始实施另一个子项目。   ...(2) 子项目间无关系,即两个子项目可以同时进行,互不影响。   例如:工厂里产品生产线上,一个产品由若干个零部件组成。...AOV网,如果从顶点vi到顶点j之间存在一条路径,则顶点vi是顶点vj前驱,顶点vj是顶点vi后继。活动制约关系可以通过AOV网表示。...AOV网,不允许出现环,如果出现环就表示某个活动是自己先决条件。因此需要对AOV网判断是否存在环,可以利用有向图拓扑排序进行判断。...4.2 实例图解 例如:图4.2.1所示有向无环图,采用入度表方法获取拓扑排序过程。 4.2.1 (1)选择图中入度为0顶点1,输出顶点1。删除顶点1,删除以顶点1为尾边。

    2.4K60

    wrf-python 详解之如何使用

    近几年,python气象领域发展也越来越快,同时出现了很多用于处理气象数据python包。比如和NCL WRF_ARWUser库类似的 wrf-python模块。...为了输出数组包含所有文件所有时间,设置 timeidx 参数为 wrf.ALL_TIMES(或设置为 None)。...如果 timeidx 是单个值,那么将假设时间索引取自所有文件所有时间连接。 注意:执行 wrf.getvar 时并不会进行排序,也就是说执行函数之前应在序列按时间对文件进行排序。...然而,字典中所有的WRF文件都应包含相同维度。结果是一个数组,最左侧维度是字典键。同样允许使用嵌套字典。...然而,如果需要轴边界,可以使用wrf.cartopy_xlim 和 wrf.cartopy_ylim 获取轴投影坐标移动边界数组。

    20.2K1012

    【人工智障入门实战1】构造一个简单神经网络,以DQN方式实现小游戏自动控制

    之前文章,我们做了如下工作: •如何设计一个类flappy-bird小游戏:【python实战】使用pygame写一个flappy-bird类小游戏 | 设计思路+项目结构+代码详解|新手向•DFS...如图,我已经训练了 53 次(每次10个epoch),输入上述命令,你将开始第 54 次训练,如果不使用任务管理器强制停止,计算机将一直训练下去,自动保存最新一代权重。...为了节省计算资源,同时加快训练速度,我们人为地替机器提取这些信息: •不再将巨大 2 帧“图像矩阵”输入到网络;•取而代之是,输入 2 帧位置信息;•即输入玩家xy坐标、左障碍物右上顶点xy坐标...、右障碍物左上顶点xy坐标、4个障碍方块左上顶点xy坐标(共14个数);•如此, 2 帧数据共 28 个数字,我们神经网络输入层只有 28 个神经元,比上一个模型(25600)少了不止一个数量级。...记录训练微型框架 为了保存训练好权重,且需要时可以暂停继续训练,我新建了一个.json文件用于保存训练数据。

    80020

    Python绘制可以表示密度散点图

    通过筛选条件data["26"] == 1从DataFrame获取符合指定条件数据,分别存储x和y。   ...接下来,使用np.vstack()将x和y垂直堆叠为一个二维数组xy使用scipy.stats.gaussian_kde()计算二维数据核密度估计值,并将其存储z;使用z.argsort()对...z进行排序,返回索引值,并将其存储idx。...使用plt.scatter()绘制散点图,其中x和y是散点横纵坐标,c是颜色值,s是散点大小,cmap是颜色映射,使用plt.colorbar()添加颜色条。   ...紧接着,使用plt.rc()设置字体为Times New Roman;随后,生成一条直线坐标范围,使用np.linspace()生成一系列横坐标值,并存储x_line;这些点将组成后续所得散点图中

    10910

    从0到1教你学Maven(全网最详细)(十一)Maven项目之间关系

    这样我们使用Maven去打包项目的时候,maven 会将项目的N个project分别打包,最后打成N个包,其他人就可以根据自 己需求来获取指定资源使用了。...Maven项目依赖关系使用 ① 创建项目A完成功能开发 ② 项目Apom文件配置项目B或者其他第三方资源资源坐标项目A中正常调用项目B资源即可。 3....注意: 开发阶段,并且同一个工作空间,不同maven项目之间可以通过资源 坐标直接调用其资源,无需将其打包放到本地仓库。但是项目运行期间,必 须根据依赖关系顺序依次打包,才能正常运行。...项目B所有子项目之 间也是相互独立。 Maven项目的聚合关系 依赖关系是A调用B功能资源,将B打包放入A中使用。 继承关系是A可以拥有B声明资源。...这些零件之间关系就是聚合关系 maven项目中使用聚合关系流程 ① 创建一个pom项目: 记录子项目之间逻辑关系。 统一管理项目的资源,每个子项目的pom文件依赖集。

    85220

    C语言图结构总结(一)

    (或者直接手写 8 个坐标偏移) 判断可能位置是否合法(没有超出边界且该位置还没有被遍历过) 递归,回溯,直到找出解 这一步还可以用贪心算法优化: 我们要走下一步位置,它可选下一步位置数(记为权重...)应当最少; 对下一步位置权重集合进行非递减排序可以有重复值递增排序); 然后按照这个排序结果遍历,就可以少很多次递归。...8]; }; // 下一个可能跳坐标 inline xybox nextxy(int x,int y,int count,xybox* data) { xybox xy; xy.x = x + data...continue; } else { // 否则标记,继续递归 weight.xy[weight.len++] = { xy.x,xy.y }; flag = 0; chess...若一个未被遍历过顶点( 白色顶点 )与多条 紫色边 相连,则只保留权值最小 紫色边 ,其余 紫色边 弃掉 4. 将 紫色边 权值最小那条涂为 红色 ,与其相连顶点连入生成树 5.

    2K20

    漫谈依赖管理工具:从Maven,Gradle到Go

    当然,如果项目足够简单,你可以直接将依赖方源码放置自己项目中,或者将依赖库二进制文件(比如jar,dll)放置项目的lib里。要提供给别人呢?把二进制包提供下载或者给别人传过去。...假设还没有依赖管理工具,我们自己要设计一个,如何入手1.要有一种依赖库命名规则,或者叫坐标(Coordinates)定义规则,可以通过坐标准确找到依赖库。...Maven,任何扩展都需要通过Maven插件实现,但Gradle配置文件本身就是一种语言,可以直接依赖任意Java库,可以直接在build.gradle文件像Ant一样定义task,比Ant表达能力更强...Gradle配置文件可以直接获取到Project对象以及环境变量,可以通过程序对build过程进行更细致自定义控制,这个功能对于复杂项目来说非常有用。...子项目的配置也不需要显示配置父项目,只需要父项目单向配置子项目列表即可。

    2.6K70

    【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡

    iVX不仅是一门编程语言,还是一个IDE;开发者不需要下载对应环境就可以在线进行开发,发布项目时还可以直接进行部署,支持域名解析;在这一方面,iVX 减省了对应运维成本,开发者只需要关注应用功能...选择项目创建时,将会看到有 绝对定位 应用和 相对定位 应用,这两者区别分别如下: 绝对定位:使用绝对 xy 坐标绘制应用元素(例如图片所在位置根据 xy 确定),之后将会通过示例详细讲解; 相对定位...:以上界面,左侧为组件面板,组件面板是 iVX 可添加元素区域,组件栏可以找到你想要元素添加至项目中,开发简单点击即可添加; 属性面板:属性面板可以更改组件属性,例如文本颜色、大小,图片来源...、边框等; 预览工具:预览区域可以项目进行配置、发布以及获取预览地址; 对象树:该项目中所有添加元素在对象树中都可以找得到; 事件及其他工具:添加事件、服务等内容; 舞台区:项目编辑、即时显示窗口;...: 此时咱们可以看到这个元素属性面板中有 xy 值,这个 xy 值是以舞台区左上角为原点,越往右 x 值越大,越往下 y 值越大,更改 xy可以更改此元素界面位置: 4.2

    1.2K20
    领券