首页
学习
活动
专区
工具
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采样模式下是判断不到ADCDAT0的bit15位的,因为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方法,使该库停止工作。

    55020

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

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

    1.5K21

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

    公交、地铁线路数据,可以用于交通运输、公共服务水平分析等各个领域,是规划相关工作中较为常用的数据。 该脚本的数据获取逻辑是: 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.4K21

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

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

    73710

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

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

    3.5K30

    【人工智障入门实战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文件用于保存训练数据。

    81420

    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.8K1012

    浅谈什么是图拓扑排序

    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

    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中;这些点将组成后续所得散点图中的

    13310

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

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

    86620

    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.7K70

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

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

    1.2K20

    小聊聊NGUI中Panel的Clip功能(之一)

    对于裁剪,我们的目标其实很明确,就是判断某个点是否在Panel的区域中,如果不在则将其直接“裁剪掉”,在则保留,相关的方法有不少,比较直接的一种就是直接比较点坐标与Panel的Corner坐标,不过这里我们使用一种更为通用的方法...,就是将点坐标转换到Panel的局部坐标系下,并执行一个“归一化”操作,操作上就是首先执行一个位移操作,然后依据Panel的大小执行一个缩放,即:   假设顶点坐标为 vx, vy, Panel的中心位置为...,根据前面所述,该值被变换到了Panel的局部坐标系下,并依据Panel大小进行了缩放操作,所以如果IN.worldPos.x(即前面的vx’)的绝对值小于等于1,则可以认定IN.worldPos.x在...) - abs(IN.worldPos)这句话即是用来判断顶点是否在Panel的范围之内,所得结果的任一分量如果小于0则点在Panel范围之外,反之结果分量如果都大于0,则点在Panel范围之内~   ...,不过目前该实现方式仅能支持NGUI的原生控件,对于其他的可视元素便无能为力了,如果我们在UI上挂上一个粒子(ParticleSystem),很快便能发现裁剪不起效果了,但是实际项目中,在UI上挂接粒子

    1.3K20

    GDAL坐标转换

    二、地理坐标系 地理坐标系就是常说的经纬度坐标系,比如用GPS直接获取的坐标就是在地理坐标系下获取的。一个真实坐标无论怎么变换,一定会有地理坐标系作为基准,也一定有可以转换出来的经纬度坐标。...例如进入这个文件夹,用Excel打开pcs.csv这个文件,就可以看到各种坐标系的参数了。 除了这种方法,也可以在环境变量中设置GDAL_DATA变量来实现。...在Global Mapper中三种投影设置方式如下: 可以看出,高斯-克吕格投影和UTM投影其实都是横轴墨卡托投影,两者都是通过设置带号(Zone)来实现设置横轴墨卡托投影的具体参数(Parameters...::DestroyCT(LonLat2XY); LonLat2XY = nullptr; 这里通过复制之前定义的高斯-克吕格投影平面坐标系得到相同的地理坐标系(当然也可以自定义新坐标系),然后使用OGRCoordinateTransformation...最后的输出结果为: 通过Global Mapper的坐标转换工具来验证结果是否正确: 比较可以发现两者转换的结果基本一致。

    1.8K20
    领券