angular material drag and drop triggers a callback once the css transition has completed

Question

angular material drag and drop triggers a callback once the css transition has completed

I have successfully implemented a list of elements that can be dragged and dropped using Angular Material's drag and drop feature, similar to the tutorial available at this link.

In my implementation, I have a "drop(event)" function that not only moves elements in the Angular model but also sends a request to the server and updates the model when a response is received. However, an issue arises where there is a noticeable jumping of elements because the Angular model is not changed immediately when dropping an element – it jumps back to its original position before moving to the new position once the server response is processed.

To make this process smoother for users, I want to somehow conceal the background work happening during the update.

One solution could be to maintain two separate lists – one for the user interface and another for the server – and update them accordingly (the user list upon drop and the server list upon response), but this approach may be difficult to manage.

I am exploring the idea of using CSS animations to address the issue. The drag and drop example already demonstrates the use of:

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

The 'transition: transform' property provides a smooth animation when an element is dropped. My aim is to show users a 0.5-second animation, which should provide ample time for the server response to update the model before the animation completes.

However, I noticed that the 'drop($event)' function is called after the transition ends, regardless of the duration set for the transition. This behavior seems unexpected to me as I assumed the function would be triggered upon releasing the mouse. Any insights on how to handle hiding the model update and resolving the issue with the CSS animation transitions?

Update: I have created an example showcasing the problem mentioned above. Click here to view the example.

css angular angular-material drag-and-drop

Answer 1

Answer №1

After the transition has ended, the drop function is called. This means that even if I set a 2000ms transform, the drop function will still be executed after the transition ends, which is after 2 seconds. Is this the expected behavior? I was under the impression that the function should be triggered upon releasing the mouse.

Yes, this behavior is expected due to technical reasons. The cdkDrag functionality creates a copy of the dragged element and adjusts the positions of other items using position fixed. Once the dragging action is completed (mouse up), the animation kicks in. Only after the animation completes does Angular reposition the items for a smooth transition. If this step is skipped, the elements would abruptly return to their original order before transitioning to the new order.

If you want the function to be called just before the animation ends, you can utilize cdkDragReleased. This event fires right before the animation completion. You can see the updated StackBlitz example here.

For additional information such as container details, index, or item specifics, refer to events like cdkDragExited and cdkDragEntered. Explore more in the official documentation.

Demo:

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>

    <div
      cdkDropList
      id="test"
      [cdkDropListData]="items"
      class="example-list"
      cdkDropListSortingDisabled
      (cdkDropListDropped)="drop($event)"
>
      <div class="example-box" *ngFor="let item of items" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>Shopping basket</h2>

    <div
    id="super"
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      >
      <div class="example-box" *ngFor="let item of basket" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

Code

dragEnd(event: any) {
    console.log('End', event);
  }

  cdkDropListEntered(event: any) {
    console.log(event);
  }

  cdkDropListExited(event: any) {
    console.log(event);
  }

Answer 2

After the transition has ended, the drop function is called. This means that even if I set a 2000ms transform, the drop function will still be executed after the transition ends, which is after 2 seconds. Is this the expected behavior? I was under the impression that the function should be triggered upon releasing the mouse.

Yes, this behavior is expected due to technical reasons. The cdkDrag functionality creates a copy of the dragged element and adjusts the positions of other items using position fixed. Once the dragging action is completed (mouse up), the animation kicks in. Only after the animation completes does Angular reposition the items for a smooth transition. If this step is skipped, the elements would abruptly return to their original order before transitioning to the new order.

If you want the function to be called just before the animation ends, you can utilize cdkDragReleased. This event fires right before the animation completion. You can see the updated StackBlitz example here.

For additional information such as container details, index, or item specifics, refer to events like cdkDragExited and cdkDragEntered. Explore more in the official documentation.

Demo:

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>

    <div
      cdkDropList
      id="test"
      [cdkDropListData]="items"
      class="example-list"
      cdkDropListSortingDisabled
      (cdkDropListDropped)="drop($event)"
>
      <div class="example-box" *ngFor="let item of items" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>Shopping basket</h2>

    <div
    id="super"
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      >
      <div class="example-box" *ngFor="let item of basket" (cdkDragEntered)="cdkDropListEntered($event)"
      (cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

Code

dragEnd(event: any) {
    console.log('End', event);
  }

  cdkDropListEntered(event: any) {
    console.log(event);
  }

  cdkDropListExited(event: any) {
    console.log(event);
  }

angular material drag and drop triggers a callback once the css transition has completed

Answer №1

Similar questions

Apply the CSS style specifically to the initial row in the table

Display text with a hover effect

Angular 5 Application Experiencing 17-Second Delays in Request Processing on Chrome

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

Ways to invoke main.ts to communicate with an Angular component using Electron

connecting a BehaviorSubject to the [disabled] property of a button

I am experiencing issues with the loading of CSS and JavaScript files in my recently created Laravel project

Angular - Display shows previous and current data values

Is there a more efficient method for horizontally and vertically aligning in this particular scenario using HTML and CSS?

Create a sleek and uniform design with Bootstrap by setting up three columns that maintain the same height

Perfectly Aligning Image at the Center of the Screen

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Tips for utilizing comment tags efficiently

What CSS style should be used to fill both the thumbs up and thumbs down icons of a glyphicon?

What is causing the body to be partially hidden on the right side of every mobile device screen?

Switching to Angular's routing, prioritize removal of the previous component

The <img> tag needs to dynamically adjust its size based on the width of its parent element, while ensuring it does not exceed its original dimensions

Restrict the character count in the input field according to its width

Utilizing Angular to call a function defined in Renderer2 and assign it to a

Generating a PDF file from HTML div content using a button click