Angular CDK拖放 - 如何保持原始位置？

Posted 2023-03-06

【中文标题】Angular CDK拖放 - 如何保持原始位置？

【英文标题】：Angular CDK drag and drop - how to keep original position?

【发布时间】：2019-06-19 02:38:18

【问题描述】：

我正在尝试拖放 Angular/cdk 库。见链接：https://material.angular.io/cdk/drag-drop/overview

我一直在用它进行原型设计，但有一件事我似乎无法找到解决方案。

例如，如果您查看链接中的待办事项列表，您会发现当开始拖动时，您会丢失放置项目的原始位置。

所以我的问题是：有人知道在开始使用 Angular/cdk 拖动项目时如何保持原始位置突出显示吗？

【参考方案1】：

我也偶然发现了同样的问题。目前没有直接的解决方案。您必须有自己的解决方法。最初，您必须了解 cdk-drag-drop 默认情况下会提供以下事件来帮助您解决问题。 cdk-drag-drop api

cdkDragStarted - 当您开始拖动元素时调用此事件。 cdkDragReleased - 当您释放拖动的元素时调用此事件。

html 如下所示

   <div cdkDropList
          (cdkDropEntered)="entered($event)"
          [cdkDropListData]="items"
          (cdkDropListDropped)="dropped($event)">
        <div class="drop-list">
         <div class="drag-location" *ngIf="draggedItemIndex == cind"></div>
         <div class="drag-element"
             *ngFor="let childItem of items; let cind=index"
             (cdkDragStarted)="cdkDragStarted($event,childItem, cind)" 
             (cdkDragReleased)="cdkDragReleased($event, cind)"
             cdkDrag>
         </div>
        </div>
       </div>
     </div>
    </div>
   ...
  </div>
 </div>

在组件中你可以尝试如下，

function cdkDragStarted(event, childItem,cind)
   this.draggedItemIndex = cind;

function cdkDragReleased(event, childItem,cind)
   this.draggedItemIndex = undefined;

在 css 中，您可以将 css 添加到特定的“拖动位置”类。

.drag-location
  height: 5px;
  background-color: #4d4dff

因此，根据程序的逻辑，每当您拖动一个元素时，它的“拖动位置”div 就会启用，并且会显示一条蓝线。这样，它可以用作拖动位置的指示。这是一个简单的解决方法。我在一个更大的应用程序中使用了类似的过程，但差别不大。

警告：不要将“drag-location”div设置得太高，因为它会干扰cdk-drag-drop css并折叠基本结构。