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 -
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 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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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