Topic: Drag and drop with drag handle breaks z-order

Marvin Herbold priority asked 2 years ago

Hello - using drag and drop with a specified drag handle breaks the z-order of the draggable.

See snippet for an example -

The z-order of the draggable works correctly if you do not specify a drag handle.

Marvin Herbold priority answered 2 years ago

Here was my reply - typing this up for the 2nd time...

Yes - this is what I did to work around the issue -

.sortable-item-dragging { z-index: 9000 !important; }

It works.

Yesterday, I noticed another issue. I have enabled the following:

data-mdb-block-x-axis = true

And that works as well. However, after dragging and letting go of the mouse button, the dragging item jumps to where my mouse cursor is, and then does the final animation to settle into the spot it was dragged into, as if the axis block was turned off right before starting the final animation. This is very jarring and looks broken. Please fix this as well.

Grzegorz Bujański staff commented 2 years ago

I will add this to our to-do list

Marvin Herbold priority answered 2 years ago

Ugh - I just typed up a long reply here and it asked me to log in, which I did, and after doing so this site completely threw away my reply. :-\

Grzegorz Bujański staff answered 2 years ago

I'll add this to our to-do list. We will fix it as soon as possible. As a workaround you can add styles to increase the z-index of the .sortable-item-dragging element

Marvin Herbold priority answered 2 years ago

Investigating further it seems like the culprit is MDB is placing the "dragging" class on the drag handle instead of the drag container. The "dragging" class is what sets the z-index. The fix would be to always put the "dragging" class on the container, never on the handle.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes