角CDK拖动拖放绝对定位元素而不会跳转
兰迪延森
我正在尝试使用CDK中的“角度拖放”来实现带有可拖动元素的基本边栏，用户可以在其中将它们拖放到“内容”区域中的任何位置。这意味着，这些元素最终应该绝对定位，并且应该能够生活在用户希望的任何位置，包括彼此重叠。
我正在尝试将cdkDropListConnectedTo与cdkDropList一起使用。我主要在这里工作，但是您可以看到将多个项目拖到内容区域时，先前的项目会跳来跳去。我希望用户能够在内容区域上拖放任意数量的项目，并且应该能够将它们随意放置在不影响其他元素的情况下。
看起来有些简单的CSS可以解决此问题，但是现在我想知道这是否不是实现此目标的正确方法。
添加cdkDropListSortingDisabled =“ true”后更新了gif
埃利索
只需cdkDropListSortingDisabled="true"在您的cdkDropList #dropZone中添加
<div
id="page-0"
class="document-page dropZone"
#dropZone
cdkDropList
id="drop-list"
cdkDropListSortingDisabled="true" //<----HERE
(cdkDropListDropped)="itemDropped($event)"
>
尝试更新：
itemDropped(event: CdkDragDrop<any[]>) {
const rect=event.item.element.nativeElement.getBoundingClientRect()
event.item.data.top=(rect.top+event.distance.y-this.dropZone.nativeElement.getBoundingClientRect().top)+'px'
event.item.data.left=(rect.left+event.distance.x-this.dropZone.nativeElement.getBoundingClientRect().left)+'px'
this.addField({...event.item.data}, event.currentIndex);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
绝对定位元素的宽度
- 2
绝对定位元素激活滚动
- 3
了解绝对定位元素的默认位置
- 4
Bootstrap 4对绝对定位元素的响应
- 5
了解绝对定位元素的默认位置
- 6
绝对定位元素上的 Mouseenter 事件
- 7
更具体的CSS绝对定位元素不会覆盖先前设置的高度/宽度
- 8
绝对定位元素不在Safari iOS中的其他绝对定位元素之上
- 9
在不使用绝对定位的情况下定位元素
- 10
在定位元素时使用边距还是绝对定位？
- 11
为什么绝对定位元素显示在静态元素上？
- 12
相对定位元素内的绝对定位元素。如何获得宽度和高度？
- 13
在使用jQuery UI拖动之前重新定位元素
- 14
页面中具有绝对定位元素的angularjs
- 15
如何使用绝对位置来定位元素？
- 16
带有滚动容器的绝对定位元素
- 17
绝对定位元素的宽度百分比
- 18
根据滚动位置沿路径绝对定位元素
- 19
如何定义绝对定位元素的锚点？
- 20
相对位置不包含绝对定位元素
- 21
根据里面的内容调整绝对定位元素的宽度
- 22
CSS - 在绝对定位元素后恢复正常的文档流
- 23
绝对定位元素上不需要的边距
- 24
绝对定位元素增加了巨大的空白
- 25
是否可以根据要定位的元素的右下角绝对定位元素？
- 26
在绝对定位元素的顶部定位一个元素反应原生
- 27
JavaScript定位元素
- 28
JavaScript定位元素
- 29
在相对定位元素中的绝对之后，像往常一样流动元素
我来说两句