gridstack 3.1.4 and sortablejs: draggable sort dont work - draggable zone overlays html content (?)

Question

I'm using gridstack v 0.4.0 with sortable.js. In Gridstack i have a widget with a list, sortable.js makes the list reorderable via drag and drop. This works like a charm :-)

I updated to v 3.1.4. The grid works great, but my sortable.js list is not working. After many tests I found out, that when I set the option setstatic to true the sortable works. Now when I move the mouse over an element the mouse pointer turns into an input cursor. If setstatic is set to false and I move the mouse over an element, the cursor remains.

Every widget has a header, draggable handle is set to the header class.

I think the draggable zone is set over the complete widget element and not only on the header.

How can sortablejs working again with gridstack staticGrid false?

Hope someone can help.

Here are some codepens:

Gridstack 3.1.4 - staticGrid: false - Sortable in Grid dont  work

https://codepen.io/LordKingPin2020/pen/ZEpZXqW

Gridstack 3.1.4 - staticGrid: true - Sortable in Grid work (but widget cant be moved :( 

https://codepen.io/LordKingPin2020/pen/ZEpZXpE

question from:https://stackoverflow.com/questions/65829992/gridstack-3-1-4-and-sortablejs-draggable-sort-dont-work-draggable-zone-overla

Answer 1

Waitting for answers