Skip to content

flicker subgrid drag issue #3291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Jun 20, 2026
Merged

flicker subgrid drag issue #3291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions doc/API.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4316,7 +4316,7 @@ Note: Use enable()/disable() methods to change state as other operations need to
new DDDroppable(el, option): DDDroppable;
```

Defined in: [dd-droppable.ts:27](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L27)
Defined in: [dd-droppable.ts:29](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L29)

###### Parameters

Expand All @@ -4341,7 +4341,7 @@ Defined in: [dd-droppable.ts:27](https://github.com/adumesny/gridstack.js/blob/m
destroy(): void;
```

Defined in: [dd-droppable.ts:70](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L70)
Defined in: [dd-droppable.ts:76](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L76)

Destroy this drag & drop implementation and clean up resources.
Removes all event handlers and clears internal state.
Expand All @@ -4360,7 +4360,7 @@ Removes all event handlers and clears internal state.
disable(forDestroy): void;
```

Defined in: [dd-droppable.ts:57](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L57)
Defined in: [dd-droppable.ts:63](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L63)

Disable this drag & drop implementation.
Subclasses should override to perform additional cleanup.
Expand All @@ -4385,7 +4385,7 @@ Subclasses should override to perform additional cleanup.
drop(e): void;
```

Defined in: [dd-droppable.ts:146](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L146)
Defined in: [dd-droppable.ts:152](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L152)

item is being dropped on us - called by the drag mouseup handler - this calls the client drop event

Expand All @@ -4405,7 +4405,7 @@ item is being dropped on us - called by the drag mouseup handler - this calls th
enable(): void;
```

Defined in: [dd-droppable.ts:44](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L44)
Defined in: [dd-droppable.ts:50](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L50)

Enable this drag & drop implementation.
Subclasses should override to perform additional setup.
Expand All @@ -4424,7 +4424,7 @@ Subclasses should override to perform additional setup.
off(event): void;
```

Defined in: [dd-droppable.ts:40](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L40)
Defined in: [dd-droppable.ts:46](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L46)

Unregister an event callback for the specified event.

Expand All @@ -4448,7 +4448,7 @@ Unregister an event callback for the specified event.
on(event, callback): void;
```

Defined in: [dd-droppable.ts:36](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L36)
Defined in: [dd-droppable.ts:42](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L42)

Register an event callback for the specified event.

Expand Down Expand Up @@ -4500,7 +4500,7 @@ Result from the callback function, if any
updateOption(opts): DDDroppable;
```

Defined in: [dd-droppable.ts:77](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L77)
Defined in: [dd-droppable.ts:83](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L83)

Method to update the options and return the DD implementation

Expand All @@ -4523,8 +4523,9 @@ Method to update the options and return the DD implementation
| Property | Modifier | Type | Default value | Description | Defined in |
| ------ | ------ | ------ | ------ | ------ | ------ |
| <a id="accept-1"></a> `accept` | `public` | (`el`) => `boolean` | `undefined` | - | [dd-droppable.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L25) |
| <a id="el-1"></a> `el` | `public` | `HTMLElement` | `undefined` | The HTML element being extended | [dd-droppable.ts:27](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L27) |
| <a id="option-1"></a> `option` | `public` | [`DDDroppableOpt`](#dddroppableopt) | `{}` | The drag & drop options/configuration | [dd-droppable.ts:27](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L27) |
| <a id="el-1"></a> `el` | `public` | `HTMLElement` | `undefined` | The HTML element being extended | [dd-droppable.ts:29](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L29) |
| <a id="eventel"></a> `eventEl` | `protected` | `HTMLElement` | `undefined` | - | [dd-droppable.ts:27](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L27) |
| <a id="option-1"></a> `option` | `public` | [`DDDroppableOpt`](#dddroppableopt) | `{}` | The drag & drop options/configuration | [dd-droppable.ts:29](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L29) |

***

Expand Down
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ Change log
* NEW: vue wrapper: brand new wrapper follow same pattern as well
* fix: [#3154](https://github.com/gridstack/gridstack.js/issues/3154) Esc key doesn't restore subgrid
* fix: [#3231](https://github.com/gridstack/gridstack.js/issues/3231) drag broken in Firefox 147.0.4+ and Chrome 144+ due to `navigator.maxTouchPoints > 0` now returning true on desktop (macOS trackpad)
* fix: [#3291](https://github.com/gridstack/gridstack.js/pull/3291) flicker nested grid demo when dragging between sub-grids

## 12.6.0 (2026-04-08)
* feat: [#3250](https://github.com/gridstack/gridstack.js/pull/3250) full RTL support - thank you [Daniel Cohen Gindi](https://github.com/danielgindi)
Expand Down
23 changes: 14 additions & 9 deletions src/dd-droppable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,17 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt

public accept: (el: HTMLElement) => boolean;

protected eventEl: HTMLElement;

constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {
super();
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
this._mouseEnter = this._mouseEnter.bind(this);
this._mouseLeave = this._mouseLeave.bind(this);
// For sub-grids the .grid-stack element is inset from the .grid-stack-item cell by the item
// margins (--gs-item-margin-*). Register on the outer .grid-stack-item instead so adjacent
// cells are gapless — moving from one sub-grid to a sibling never passes through dead space.
this.eventEl = (this.el.closest('.grid-stack-item') as HTMLElement) || this.el;
this.enable();
this._setupAccept();
}
Expand All @@ -46,11 +52,11 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
super.enable();
this.el.classList.add('ui-droppable');
this.el.classList.remove('ui-droppable-disabled');
this.el.addEventListener('mouseenter', this._mouseEnter);
this.el.addEventListener('mouseleave', this._mouseLeave);
this.eventEl.addEventListener('mouseenter', this._mouseEnter);
this.eventEl.addEventListener('mouseleave', this._mouseLeave);
if (isTouch) {
this.el.addEventListener('pointerenter', pointerenter);
this.el.addEventListener('pointerleave', pointerleave);
this.eventEl.addEventListener('pointerenter', pointerenter);
this.eventEl.addEventListener('pointerleave', pointerleave);
}
}

Expand All @@ -59,11 +65,11 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
super.disable();
this.el.classList.remove('ui-droppable');
if (!forDestroy) this.el.classList.add('ui-droppable-disabled');
this.el.removeEventListener('mouseenter', this._mouseEnter);
this.el.removeEventListener('mouseleave', this._mouseLeave);
this.eventEl.removeEventListener('mouseenter', this._mouseEnter);
this.eventEl.removeEventListener('mouseleave', this._mouseLeave);
if (isTouch) {
this.el.removeEventListener('pointerenter', pointerenter);
this.el.removeEventListener('pointerleave', pointerleave);
this.eventEl.removeEventListener('pointerenter', pointerenter);
this.eventEl.removeEventListener('pointerleave', pointerleave);
}
}

Expand Down Expand Up @@ -176,4 +182,3 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
};
}
}