diff --git a/doc/CHANGES.md b/doc/CHANGES.md index d499b6162..c3fafecb3 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,6 +5,7 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* +- [8.3.0-dev (TBD)](#830-dev-tbd) - [8.3.0 (2023-06-13)](#830-2023-06-13) - [8.2.3 (2023-06-11)](#823-2023-06-11) - [8.2.1 (2023-05-26)](#821-2023-05-26) @@ -91,6 +92,9 @@ Change log +## 8.3.0-dev (TBD) +* feat [#2378](https://github.com/gridstack/gridstack.js/pull/2378) attribute `DDRemoveOpt.decline` to deny the removal of a specific class. + ## 8.3.0 (2023-06-13) * feat [#2358](https://github.com/gridstack/gridstack.js/issues/2358) column(N, 'list'|'compact'|...) resizing now support reflowing content as list diff --git a/doc/README.md b/doc/README.md index d00f963cf..8bca6ddaa 100644 --- a/doc/README.md +++ b/doc/README.md @@ -70,7 +70,7 @@ gridstack.js API ## Grid Options - `acceptWidgets` - Accept widgets dragged from other grids or from outside (default: `false`). Can be: - * `true` will accept HTML element having `'.grid-stack-item'` as class attribute, else `false` + * `true` will accept HTML element having `'grid-stack-item'` as class attribute, else `false` * string for explicit class name to accept instead * `function (el: Element): boolean` function called before an item will be accepted when entering a grid. the function will be passed the item being dragged, and should return true | false. See [example](https://github.com/gridstack/gridstack.js/blob/master/demo/two.html#L62) - `alwaysShowResizeHandle` - possible values (default: `mobile`) - does not apply to non-resizable widgets diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts index 06937a6e3..c02802917 100644 --- a/src/dd-droppable.ts +++ b/src/dd-droppable.ts @@ -156,7 +156,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt protected _setupAccept(): DDDroppable { if (!this.option.accept) return this; if (typeof this.option.accept === 'string') { - this.accept = (el: HTMLElement) => el.matches(this.option.accept as string); + this.accept = (el: HTMLElement) => el.classList.contains(this.option.accept as string) || el.matches(this.option.accept as string); } else { this.accept = this.option.accept; } diff --git a/src/gridstack.ts b/src/gridstack.ts index 3b2623e47..cc0574a07 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -285,7 +285,7 @@ export class GridStack { handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle, }, removableOptions: { - accept: opts.itemClass ? '.' + opts.itemClass : gridDefaults.removableOptions.accept, + accept: opts.itemClass || gridDefaults.removableOptions.accept, decline: gridDefaults.removableOptions.decline }, }; diff --git a/src/types.ts b/src/types.ts index c2c619df9..7bbb27927 100644 --- a/src/types.ts +++ b/src/types.ts @@ -25,7 +25,7 @@ export const gridDefaults: GridStackOptions = { oneColumnSize: 768, placeholderClass: 'grid-stack-placeholder', placeholderText: '', - removableOptions: { accept: '.grid-stack-item' ,decline:'grid-stack-non-removable'}, + removableOptions: { accept: 'grid-stack-item', decline: 'grid-stack-non-removable'}, resizable: { handles: 'se' }, rtl: 'auto', @@ -333,8 +333,9 @@ export interface DDResizeOpt { /** Drag&Drop remove options */ export interface DDRemoveOpt { - /** class that can be removed (default?: '.' + opts.itemClass) */ + /** class that can be removed (default?: opts.itemClass) */ accept?: string; + /** class that cannot be removed (default: 'grid-stack-non-removable') */ decline?: string; }