From 5eec1b56551181003d4af00b1f8112b09008dd72 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 17 May 2020 18:31:27 -0700 Subject: [PATCH 1/2] TS: fix removableOptions --- src/gridstack.ts | 2 +- src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/gridstack.ts b/src/gridstack.ts index 2ae8f0d2e..97258e605 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -192,7 +192,7 @@ export class GridStack { rtl: 'auto', removable: false, removableOptions: { - accept: '.' + opts.itemClass + accept: '.' + (opts.itemClass || 'grid-stack-item') }, removeTimeout: 2000, verticalMarginUnit: 'px', diff --git a/src/types.ts b/src/types.ts index f94b0579a..8f91b8c37 100644 --- a/src/types.ts +++ b/src/types.ts @@ -112,7 +112,7 @@ export interface GridstackOptions { resizable?: DDResizeOpt; /** - * if true widgets could be removed by dragging outside of the grid. It could also be a selector string, + * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: ".trash"), * in this case widgets will be removed by dropping them there (default?: false) * See example (http://gridstack.github.io/gridstack.js/demo/two.html) */ From c85575ba1c09a790ffc14b947c921f7f3b235e5e Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 17 May 2020 19:30:42 -0700 Subject: [PATCH 2/2] TS: initial dragIn | dragInOptions * hidding the jquery-ui drag&drop from external (ex: toolbar) functionality. * added grid options: dragIn | dragInOptions --- demo/advance.html | 3 +- demo/two.html | 9 +----- doc/CHANGES.md | 1 + src/gridstack-dragdrop-plugin.ts | 11 +++++++- src/gridstack.ts | 18 ++++++++++++ src/jq/jqueryui-gridstack-dragdrop-plugin.ts | 29 +++++++++----------- src/types.ts | 12 ++++++++ 7 files changed, 57 insertions(+), 26 deletions(-) diff --git a/demo/advance.html b/demo/advance.html index db83344d6..f8c157aed 100644 --- a/demo/advance.html +++ b/demo/advance.html @@ -111,6 +111,8 @@

Advanced Demo

}, removable: '#trash', removeTimeout: 100, + // dragIn: '.newWidget', + // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, acceptWidgets: '.newWidget' }); @@ -119,7 +121,6 @@

Advanced Demo

items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; }); console.log(e.type + ' ' + items.length + ' items:' + str ); }); - // TODO: switch jquery-ui out $('.newWidget').draggable({ revert: 'invalid', diff --git a/demo/two.html b/demo/two.html index 8b2edad09..24151a810 100644 --- a/demo/two.html +++ b/demo/two.html @@ -97,6 +97,7 @@

Two grids demo

float: false, removable: '.trash', removeTimeout: 100, + dragIn: '.sidebar .grid-stack-item', acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value }; let grids = GridStack.initAll(options); @@ -120,14 +121,6 @@

Two grids demo

grid.commit(); }); - // TODO: switch jquery-ui out - $('.sidebar .grid-stack-item').draggable({ - revert: 'invalid', - handle: '.grid-stack-item-content', - scroll: false, - appendTo: 'body', - }); - function toggleFloat(button, i) { grids[i].float(! grids[i].getFloat()); button.innerHTML = 'float: ' + grids[i].getFloat(); diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 0f0d6f710..75d1d5f8e 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -38,6 +38,7 @@ Change log - re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using for now) - add `getGridItems()` to return list of HTML grid items +- add `{dragIn | dragInOptions}` grid attributes to handle external drag&drop items ## 1.1.2 (2020-05-17) diff --git a/src/gridstack-dragdrop-plugin.ts b/src/gridstack-dragdrop-plugin.ts index 6521c7534..33e4ef412 100644 --- a/src/gridstack-dragdrop-plugin.ts +++ b/src/gridstack-dragdrop-plugin.ts @@ -7,8 +7,9 @@ */ /* eslint-disable @typescript-eslint/no-unused-vars */ -import { GridStack } from './gridstack'; +import { GridStack, GridStackElement } from './gridstack'; import { GridItemHTMLElement } from './types'; +import { DDDragInOpt } from '../dist/types'; /** Drag&Drop drop options */ export type DDDropOpt = { @@ -48,6 +49,14 @@ export class GridStackDragDropPlugin { return this; } + public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin { + return this; + } + + public isDraggable(el: GridStackElement): boolean { + return false; + } + public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin { return this; } diff --git a/src/gridstack.ts b/src/gridstack.ts index 97258e605..cc55e8be8 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -187,6 +187,13 @@ export class GridStack { scroll: false, appendTo: 'body' }, + dragIn: undefined, + dragInOptions : { + revert: 'invalid', + handle: '.grid-stack-item-content', + scroll: false, + appendTo: 'body' + }, disableDrag: false, disableResize: false, rtl: 'auto', @@ -283,6 +290,7 @@ export class GridStack { window.addEventListener('resize', this._onResizeHandler.bind(this)); this._onResizeHandler(); + this._setupDragIn(); this._setupRemoveDrop(); this._setupAcceptWidget(); }; @@ -1481,6 +1489,16 @@ export class GridStack { return this; } + /** @internal call to setup dragging in from the outside (say toolbar), with options */ + private _setupDragIn(): GridStack { + if (!this.opts.staticGrid && typeof this.opts.dragIn === 'string') { + if (!this.dd.isDraggable(this.opts.dragIn)) { + this.dd.dragIn(this.opts.dragIn, this.opts.dragInOptions); + } + } + return this; + } + /** @internal called to setup a trash drop zone if the user specifies it */ private _setupRemoveDrop(): GridStack { if (!this.opts.staticGrid && typeof this.opts.removable === 'string') { diff --git a/src/jq/jqueryui-gridstack-dragdrop-plugin.ts b/src/jq/jqueryui-gridstack-dragdrop-plugin.ts index 06d297157..9c1c45b9d 100644 --- a/src/jq/jqueryui-gridstack-dragdrop-plugin.ts +++ b/src/jq/jqueryui-gridstack-dragdrop-plugin.ts @@ -6,9 +6,9 @@ * gridstack.js may be freely distributed under the MIT license. */ -import { GridStack } from '../gridstack'; +import { GridStack, GridStackElement } from '../gridstack'; import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dragdrop-plugin'; -import { GridItemHTMLElement } from '../types'; +import { GridItemHTMLElement, DDDragInOpt } from '../types'; // TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead ! // see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs @@ -66,6 +66,12 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin { return this; } + public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin { + let $el: JQuery = $(el); + $el.draggable(opts); + return this; + } + public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin { let $el: JQuery = $(el); if (typeof opts.accept === 'function' && !opts._accept) { @@ -82,6 +88,11 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin { return Boolean($el.data('ui-droppable')); } + public isDraggable(el: GridStackElement): boolean { + let $el: JQuery = $(el); + return Boolean($el.data('ui-draggable')); + } + public on(el: GridItemHTMLElement, name: string, callback: DDCallback): GridStackDragDropPlugin { let $el: JQuery = $(el); $el.on(name, (event, ui) => { callback(event as any, ui.draggable ? ui.draggable.get(0) : event.target) }); @@ -97,17 +108,3 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin { // finally register ourself GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin); - -/* OLD code for reference -function JQueryUIGridStackDragDropPlugin(grid) { - GridStack.DragDropPlugin.call(this, grid); -} - -GridStack.DragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin); - -JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStack.DragDropPlugin.prototype); -JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin; -.... -scope.JQueryUIGridStackDragDropPlugin = JQueryUIGridStackDragDropPlugin; -return JQueryUIGridStackDragDropPlugin; -*/ diff --git a/src/types.ts b/src/types.ts index 8f91b8c37..d5ad1ad1c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -70,6 +70,12 @@ export interface GridstackOptions { /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null }) */ draggable?: DDDragOpt; + /** allows to drag external items using this selector - see dragInOption. (default: undefined) */ + dragIn?: string; + + /** allows to drag external items using these options. (default?: { handle: '.grid-stack-item-content', revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }) */ + dragInOptions?: DDDragInOpt; + /** let user drag nested grid items out of a parent or not (default false) */ dragOut?: boolean; @@ -219,6 +225,12 @@ export interface DDDragOpt { /** parent constraining where item can be dragged out from (default: null = no constrain) */ containment?: string; } +export interface DDDragInOpt extends DDDragOpt { + /** used when draging item from the outside, and canceling (ex: 'invalid')*/ + revert?: string; + /** helper function when dropping (ex: 'clone') */ + helper?: string; +} /** * internal descriptions describing the items in the grid