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

Question

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

我已经用它做了一些原型设计，但有一件事我似乎找不到解决方案。

如果您查看链接中的待办事项列表，那么您可以看到，当开始拖动时，您会丢失放置项目的原始位置。

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

Answer 1

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

1. cdkDragStarted - 当您开始拖动元素时调用此事件。
2. 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 并破坏基本结构。

Answer 2

我在这里面临着同样的问题。但令人着迷的是，当你在边缘运行这个问题时，问题就不会出现。