Question

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

我已经对其进行了一些原型制作，但是有一件事我似乎找不到解决方法。

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

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

Answer 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就会启用，并且会显示一条蓝线。这样，它可以用作拖动位置的指示。这是一个简单的解决方法。我在较大的应用程序中使用了相似的过程，但差异不大。

警告：请勿将“拖动位置” div设置得很高，因为它会干扰cdk-drag-drop css并破坏基本结构。

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

1 个答案: