Skip to content

Update method breaks default drag and drop behavior for subgrids #3173

@heanssgen-troy

Description

@heanssgen-troy

Subject of the issue

When calling Gridstack.update(), with the exact same values the node already has, the _orig value is cleared out (added as part of #2669). This breaks the implementation of GridStack.prepareDragDrop#onEndMoving, as the widthChanged variable requires the _orig property to exist on the GridStackNode.

Moving the element within its parent grid repopulates the _orig property again, allowing the drag and drop to work.

This is normally not an issue unless the user drags an element off the grid without touching/moving an existing element (such as the case when float = true). Then, the _orig parameter is never restored and dragging to a subgrid fails.

Your environment

VueJS 3.5, Using GridStack 12.3.2.

Steps to reproduce

Using the demo at https://github.com/gridstack/gridstack.js/blob/master/demo/nested.html, simply add a call to grid.update('.grid-stack-item:first-of-type', {x: 0, w: 1, y: 0, h: 1}) twice. The first time will assign the 4 parameters to the node, the second time will do nothing but clear the _orig parameter.

You can do this in the debugger console on the existing demo as well.

Expected behavior

Update should leave the widget in the correct state, even if a redundant update call was issued. Without this, the node will drag/drop within its own grid properly, but cannot be dragged outside of its grid.

Workaround

As a dirty workaround, we can do the same thing the Engine class is doing and assign the _orig parameter ourselves like so:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions