staticGrid: false - draggable zone overlays html content (?)

[LordKingPin]

Subject of the issue

Im 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, so the elements in the widget will be overwritten by the drag zone.
-> See Codepens

Your environment

3.1.4 - gridstack-h5.js
Chrome 87.0.4280.141

Steps to reproduce

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

Expected behavior

Sortable should be work with staticGrid:false as in gridstack v 0.4.0

[adumesny]

you might be right (header vs entire area). Did you try jq version and see if that works instead ?

[LordKingPin]

jq version works:
https://codepen.io/LordKingPin2020/pen/vYXMaPB

[adumesny]

fixed in just released 3.1.5 - don't forget to donate if you find this lib useful!