Skip to content

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

@LordKingPin

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions