Angular CDK drag and drop - how to keep original position?

Question

I am trying out the Angular/cdk libraries drag and drop. See the link: https://material.angular.io/cdk/drag-drop/overview

I have been prototyping a bit with it but there is one thing that I can't seem to find a solution for.

If you look at for example the todo list from the link, then you can see that when starting to drag then you lose the original position where the item was placed.

So my question: Does someone know how to keep the original position highlighted when starting to drag an item using Angular/cdk?

VisheshRaju VisheshRaju · Accepted Answer · 2019-08-05T13:07:29

I have also stumbled upon the same problem. Currently there is no straight forward solution. You must have your own workaround. Initially u must understand that cdk-drag-drop by default provides below events that will help your case. cdk-drag-drop api

cdkDragStarted - This event is called when you start to drag an element.
cdkDragReleased - This event is called when you release the dragged element.

The HTML will be like below

   <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>

In component you can try like below,

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

In css you can add css to that specific "drag-location" class.

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

Thus as per the logic of the program whenever you drag an element its "drag-location" div is enabled and a blue line will be displayed. This way it can be used as an indication for dragged location. Its a simple work-around. I used similar process in a larger application but little different.

Warning: Do not make "drag-location" div very high as it will interfere with cdk-drag-drop css and collapse the basic structure.

Angular CDK drag and drop - how to keep original position?

1 Answers