Drag and drop with drag handle breaks z-order


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

Marvin Herbold priority asked 4 months ago

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

See snippet for an example -

https://mdbootstrap.com/snippets/standard/marvin_herbold/3793907

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


Marvin Herbold priority answered 4 months 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 4 months ago

I will add this to our to-do list


Marvin Herbold priority answered 4 months 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 4 months 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 4 months 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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