角CDK拖动拖放绝对定位元素而不会跳转 [英] Angular CDK Drag Drop Absolutely Position Elements Without Jumping

问题描述

我正在尝试使用CDK中的角度拖放来实现带有可拖动元素的基本边栏，用户可以在其中将它们拖放到内容区域中的任何位置。意思是，这些元素最终应该绝对定位，并且应该能够生活在用户想要的任何位置，包括彼此重叠。

我正在尝试使用cdkDropListConnectedTo使用cdkDropList。我主要在

添加cdkDropListSortingDisabled =后已更新gif true

< img src = https://i.stack.imgur.com/SGUmo.gif alt =角度cdk拖放>>

解决方案

只需在您的cdkDropList #dropZone

中包括 cdkDropListSortingDisabled = true

 < div 
 id = page-0 
 class = document-page dropZone 
 #dropZone 
 cdkDropList 
 id =  drop-list 
 cdkDropListSortingDisabled = true //< ----这里
（cdkDropListDropped）= it emDropped（$ 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）; 
} 
  

I'm trying to use the Angular Drag/Drop from the CDK to implement a basic sidebar with draggable elements where the user can drop them anywhere in the "content" area. Meaning, the elements should ultimately be absolutely positioned and should be able to live wherever the user wants them, including on top of each other.

I'm trying to use cdkDropListConnectedTo with a cdkDropList. I have it mostly working here, but you can see that when dragging multiple items onto the content area, the previous items jump around. I want the user to be able to drag and drop as many items on the content area as they want, and they should be able to be dropped wherever they please without affecting the other elements.

It seems like some simple CSS would be able to fix this, but now I'm wondering if this is not the right way to go about making this happen.

Updated gif after adding cdkDropListSortingDisabled="true"

解决方案

just include cdkDropListSortingDisabled="true" in your cdkDropList #dropZone

  <div 
      id="page-0" 
      class="document-page dropZone"
      #dropZone 
      cdkDropList 
      id="drop-list"
      cdkDropListSortingDisabled="true"   //<----HERE
      (cdkDropListDropped)="itemDropped($event)"
    >

Update In drop try:

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);
  }

这篇关于角CDK拖动拖放绝对定位元素而不会跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！