Responsive & Fluid Drag-and-Drop Grid Format with jQuery – gridstack.js

Gridstack.js is a vanilla JavaScript widget/grid structure plugin impressed by Gridster that permits you to dynamically and responsively rearrange grid objects via drag and drop.

Notice: The library now works as a Vanilla JavaScript plugin. You may also obtain the jQuery Model right here for jQuery initiatives.

Extra options:

• Additionally helps contact occasions.
• Resizable grid objects.
• Helps nested grid objects.
• Suitable with Bootstrap 3/4 framework.
• No jQuery required (v2.0.0+)

View extra:

Desk Of Contents:

Fundamental Utilization (Vanilla JS Model):

1. Set up & Obtain the package deal.

# Yarn
$ yarn add gridstack

# NPM
$ npm set up gridstack --save

2. Embrace the mandatory JavaScript and CSS information on the web page.

<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/[email protected]/dist/gridstack.min.css" />
<script src="https://cdn.jsdelivr.internet/npm/[email protected]/dist/gridstack.all.js"></script>

3. Insert elective grid objects to the Grid Stack container and move the choices through data-option attributes as follows:

<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Merchandise 1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="2">
    <div class="grid-stack-item-content">Merchandise 2 wider</div>
  </div>
</div>

4. Initialize the plugin and achieved.

var grid = GridStack.init();

5. All default choices.

var grid = GridStack.init({


    // settle for widgets dragged from different grids or from exterior
    // true (makes use of '.grid-stack-item' class filter) or false
    // string for specific class identify
    // perform (i: quantity, aspect: Factor): boolean
    acceptWidgets: false,

    // turns animation on
    animate: false,

    // quantity of columns and rows
    column: 12,
    row: 0,

    // max/min variety of rows
    maxRow: 0,
    minRow: 0,

    // widget class
    itemClass: 'grid-stack-item',

    // class for placeholder
    placeholderClass: 'grid-stack-placeholder',

    // textual content for placeholder
    placeholderText: '',

    // draggable deal with selector
    deal with: '.grid-stack-item-content',

    // class for deal with
    handleClass: null,

    // permit for choosing older habits (including STYLE aspect to HEAD aspect as an alternative of parentNode)
    styleInHead: false,

    // one cell top
    cellHeight: 60,
    cellHeightUnit: 'px',

    // margin
    margin: 10,
    marginUnit: 'px',

    // or
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10

    // if false it tells to don't initialize present objects
    auto: true,
    
    // minimal width.
    minWidth: 768,

    // class set on grid when in a single column mode
    oneColumnModeClass: 'grid-stack-one-column-mode',

    // set to true if you need oneColumnMode to make use of the DOM order and ignore x,y from regular multi column layouts throughout sorting. This lets you have customized 1 column structure that differ from the remaining.
    oneColumnModeDomSort: false,

    // allow floating widgets
    float: false,

    // makes grid static
    staticGrid: false,

    // if true the resizing handles are proven even the person shouldn't be hovering over the widget
    alwaysShowResizeHandle: false,

    // permits to owerride jQuery UI draggable choices
    draggable: {deal with: '.grid-stack-item-content', scroll: true, appendTo: 'physique'},

    // specify the category of things that may be dragged into the grid
    dragIn: false,
    dragInOptions : {
      revert: 'invalid',
      deal with: '.grid-stack-item-content',
      scroll: false,
      appendTo: 'physique'
    },

    // permits to owerride jQuery UI resizable choices
    resizable: {autoHide: true, handles: 'se'},

    // disallows dragging of widgets
    disableDrag: false

    // disallows resizing of widgets
    disableResize: false,

    // if `true` turns grid to RTL. 
    // Doable values are `true`, `false`, `'auto'`
    rtl: 'auto',

    // if `true` widgets could possibly be eliminated by dragging exterior of the grid
    detachable: false,
    removableOptions: {
      settle for: 'grid-stack-item'
    },

    // time in milliseconds earlier than widget is being eliminated whereas dragging exterior of the grid
    removeTimeout: 2000,

    // CSS class when in a single column mode
    disableOneColumnMode: 'grid-stack-one-column-mode',

    // class that implement drag'n'drop functionallity for gridstack
    ddPlugin: null
    
});

6. API strategies.

// Creates a brand new widget.
grid.addWidget(el, {
  // choices
  x, y, width, top, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id, locked, noResize, noMove, resizeHandles
});

// create a grid and cargo youngsters as an alternative of init() + load()
grid.addGrid(mother or father, opts);

// name to setup dragging in from the surface (say toolbar), by specifying the category choice and choices
grid.setupDragIn(dragIn, dragInOptions);

// Initailizes batch updates. 
// You will note no adjustments till commit technique is named.
grid.batchUpdate();

// Relayout grid objects to reclaim any empty area.
grid.compact();

// Will get present cell top.
grid.cellHeight();

// Replace present cell top.
// grid.cell_height(grid.cell_width() * 1.2);
grid.cellHeight(val, noUpdate);

// Will get present cell width.
grid.cellWidth();

// Set/get the variety of columns within the grid
// Require gridstack-extra.min.css
grid.column(column, doNotPropagate)

// Set the highest/proper/backside/left margin between grid merchandise and conten
grid.margin(worth: numberOrString);

// Finishes batch updates. Updates DOM nodes. It's essential to name it after batch_update.
grid.Commit();

// Set/get floating widgets
grid.float(val);

// Get present cell top
grid.getCellHeight();

// Disables / allows widgets transferring/resizing.
grid.movable('.grid-stack-item', false);
grid.resizable('.grid-stack-item', true); 

// Get the place of the cell below a pixel on display.
// place - the place of the pixel to resolve in absolute coordinates, as an object with prime and leftproperties
// useOffset - if true, worth might be primarily based on offset vs place (Optionally available. Default false). Helpful when grid is inside place: relative aspect
// Returns an object with properties x and y i.e. the column and row within the grid.
grid.getCellFromPixel(place, useOffset);

// Return record of GridItem HTML dom parts (excluding short-term placeholder)
grid.getGridItems();

// Return present margin worth.
grid.getMargin();

// Checks if specified space is empty.
grid.isAreaEmpty(x, y, width, top);

// Load the widgets from a listing
grid.load(structure: GridStackWidget[], boolean | ((w: GridStackWidget, add: boolean) => void) = true)

// Locks/unlocks widget.
// el - widget to change.
// val - if true widget might be locked.
grid.locked(el, val);

// Make new widgets after new objects are appended to the grid.
grid.makeWidget(el);

// Set the minWidth/maxWidth for a widget.
grid.minWidth(el, val);
grid.maxWidth(el, val);

// Set the minHeight/maxWidth for a widget.
grid.minHeight(el, val);
grid.maxHeight(el, val);

// Removes widget from the grid.
// detachNode - if false node will not be faraway from the DOM
grid.removeWidget(el, detachNode);

// Removes all widgets from the grid.
// detachNode - if false node will not be faraway from the DOM
grid.removeAll(detachNode);

// Adjustments widget dimension
grid.resize(el, width, top);

// Adjustments widget place
grid.transfer(el, x, y);

// Allows/Disables resizing.
grid.resizable(el, val);

// Allows/Disables transferring.
grid.movable(el, val);

// Updates widget place/dimension.
grid.replace(el, x, y, width, top);

// Returns true if the peak of the grid might be much less the vertical constraint. All the time returns true if grid does not have top constraint.
grid.willItFit(x, y, width, top, autoPosition);

// Toggle the grid animation state.
// doAnimate - if true the grid will animate.
grid.setAnimation(doAnimate);

// Modify variety of columns within the grid
// doNotPropagate - if true present widgets won't be up to date.
// NOTE: Use column() as an alternative in v1.0+
grid.setColumn(column, doNotPropagate);

// Replace widget place/dimension.
grid.setStatic(staticValue);

// Toggle the grid static state
// staticValue - if true the grid turns into static.
grid.replace(el, x, y, width, top));

// Destroy the occasion
// detachGrid - if false nodes and grid won't be faraway from the DOM
grid.destroy([detachGrid]);

// Allows/disables the plugin
grid.allow();
grid.disable();

// Allows/disables widget transferring. includeNewWidgets will pressure new widgets to be draggable as per doEnable's worth by altering the disableDrag grid choice.
grid.enableMove(doEnable, includeNewWidgets);

// Allows/disables widget resizing. includeNewWidgets will pressure new widgets to be resizable as per doEnable's worth by altering the disableResize grid choice. 
grid.enableResize(doEnable, includeNewWidgets);

// Return the structure of the grid that may be serialized (record of merchandise non default attributes, not simply w,y,x,y but in addition min/max and id). 
grid.save(true/false);

7. Occasion handlers.

grid.on('added', perform(occasion, objects) {
  // after new objects are added
});

grid.on('change', perform(occasion, objects) {
  // fired on change
});

grid.on('resize', perform(occasion, el) {
  // fired on resize
});

grid.on('drag', perform(occasion, el) {
  // fired on resize
});

grid.on('disable', perform(occasion) {
  // var grid = occasion.goal;
});

grid.on('dragstart', perform(occasion, ui) {
  // var grid = this;
  // var aspect = occasion.goal;
});

grid.on('dragstop',  perform(occasion, ui) {
  // var grid = this;
  // var aspect = occasion.goal;
});

grid.on('dropped',  perform(occasion, previousWidget, newWidget) {
  // after dropped
});

grid.on('allow',  perform(occasion) {
  // var grid = occasion.goal;
});

grid.on('eliminated',  perform(occasion, objects) {
  // after eliminated
});

grid.on('resizestart',  perform(occasion, el) {
  // var grid = this;
  // var aspect = occasion.goal;
});

grid.on('resizestop',  perform(occasion, objects) {
  // on cease resizing
});

Fundamental Utilization (jQuery Model):

1. Embrace jQuery library and different required assets within the the doc.

• jQuery
• jQuery UI
• jQuery UI Contact Punch: for contact assist (OPTIONAL)
• gridstack.poly.js: for IE and older browsers (OPTIONAL)

<!-- Native -->
<hyperlink href="/path/to/gridstack.css" rel="stylesheet" />
<!-- Or From A CDN -->
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/[email protected]/dist/gridstack.min.css" />

2. Embrace the jQuery Gridstack.js plugin and different required assets on the finish of the doc.

<!-- Dependencies -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/jquery.ui.touch-punch.min.js"></script>

<!-- jQuery Gridstack.js -->
<script src="gridstack.all.js"></script>
<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.internet/npm/[email protected]/dist/gridstack.all.js"></script>
<!-- Polyfill for previous IE -->
<script src="gridstack.poly.js"></script>

3. Create a pattern draggable grid structure as follows.

• gs-animate: turns animation on (for grid)
• gs-column: quantity of columns (for grid)
• gs-max-row: most rows quantity, defaults to 0 (for grid)
• gs-current-height: present rows quantity (for grid)
• gs-id: distinctive ID (for merchandise)
• gs-x, data-gs-y: aspect place (for merchandise)
• gs-width, data-gs-height: aspect dimension (for merchandise)
• gs-max-width, gs-min-width, gs-max-height, gs-min-height: aspect constraints (for merchandise)
• gs-no-resize: disable aspect resizing (for merchandise)
• gs-no-move: disable aspect transferring (for merchandise)
• gs-auto-position: tells to disregard data-gs-x and data-gs-y attributes and to position aspect to the primary out there place (for merchandise)
• gs-locked: the widget might be locked. It means one other widgets could not transfer it throughout dragging or resizing. The widget remains to be might be dragged or resized. You might want to add data-gs-no-resize and data-gs-no-move attributes to utterly lock the widget (for merchandise)
• gs-resize-handles: resize handles (for merchandise)
• gs-static-grid: whether or not to make grid static

<div class="grid-stack" data-gs-width="12">
  <div class="grid-stack-item" gs-x="0" data-gs-y="0" gs-width="4" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="4" data-gs-y="0" gs-width="4" gs-height="4">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="8" gs-y="0" gs-width="2" gs-height="2" gs-min-width="2" gs-no-resize="sure">
    <div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div>
  </div>
  <div class="grid-stack-item" gs-x="10" gs-y="0" gs-width="2" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="0" gs-y="4" gs-width="2" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="2" gs-y="4" gs-width="2" gs-height="4">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="8" gs-y="4" gs-width="4" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="0" gs-y="6" gs-width="2" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="4" gs-y="6" gs-width="4" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="8" gs-y="6" gs-width="2" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" gs-x="10" gs-y="6" gs-width="2" gs-height="2">
    <div class="grid-stack-item-content"></div>
  </div>
</div>

4. Name the plugin and create a responsive & fluid 12 columns grid structure.

$(perform () {
  $('.grid-stack').gridstack({
    column: 12
  });
});

5. All doable choices and defaults out there.

$('.grid-stack').gridstack({

  // settle for widgets dragged from different grids or from exterior
  // true (makes use of '.grid-stack-item' class filter) or false
  // string for specific class identify
  // perform (i: quantity, aspect: Factor): boolean
  acceptWidgets: false,

  // turns animation on
  animate: false,

  // quantity of columns
  column: 12,

  // max/min variety of rows
  maxRow: 0,
  minRow: 0

  // most rows quantity
  top: 0, 

  // widget class
  itemClass: 'grid-stack-item',

  // class for placeholder
  placeholderClass: 'grid-stack-placeholder',

  // textual content for placeholder
  placeholderText: '',

  // draggable deal with selector
  deal with: '.grid-stack-item-content',

  // class for deal with
  handleClass: null,

  // permit for choosing older habits (including STYLE aspect to HEAD aspect as an alternative of parentNode)
  styleInHead: false,

  // one cell top
  cellHeight: 60,

  // hole dimension
  // e.g. '5px 10px 0 20px' or '5em 10em'
  margin: 10,

  // unit
  verticalMarginUnit: 'px',
  cellHeightUnit: 'px',

  // if false it tells to don't initialize present objects
  auto: true,
  
  // minimal width.
  minWidth: 768,

  // class set on grid when in a single column mode
  oneColumnModeClass: 'grid-stack-one-column-mode',

  // set to true if you need oneColumnMode to make use of the DOM order and ignore x,y from regular multi column layouts throughout sorting. This lets you have customized 1 column structure that differ from the remaining.
  oneColumnModeDomSort: false,

  // allow floating widgets
  float: false,

  // makes grid static
  staticGrid: false,

  // if true the resizing handles are proven even the person shouldn't be hovering over the widget
  alwaysShowResizeHandle: false,

  // permits to owerride jQuery UI draggable choices
  draggable: {deal with: '.grid-stack-item-content', scroll: true, appendTo: 'physique', containment: null},

  // let person drag nested grid objects out of a mother or father or not
  dragOut: false,

  // permits to owerride jQuery UI resizable choices
  resizable: {autoHide: true, handles: 'se'},

  // disallows dragging of widgets
  disableDrag: false

  // disallows resizing of widgets
  disableResize: false,

  // if `true` turns grid to RTL. 
  // Doable values are `true`, `false`, `'auto'`
  rtl: 'auto',

  // if `true` widgets could possibly be eliminated by dragging exterior of the grid
  detachable: false,

  // time in milliseconds earlier than widget is being eliminated whereas dragging exterior of the grid
  removeTimeout: 2000,

  // CSS class when in a single column mode
  disableOneColumnMode: 'grid-stack-one-column-mode',

  // class that implement drag'n'drop functionallity for gridstack
  ddPlugin: null

});

6. API strategies strategies.

// Creates a brand new widget.
grid.addWidget(el, x, y, width, top, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id);

// Initailizes batch updates. 
// You will note no adjustments till commit technique is named.
grid.batchUpdate();

// Relayout grid objects to reclaim any empty area.
grid.compact();

// Will get present cell top.
grid.cellHeight();

// Replace present cell top.
// grid.cell_height(grid.cell_width() * 1.2);
grid.cellHeight(val, noUpdate);

// Will get present cell width.
grid.cellWidth();

// Returns present vertical margin worth.
grid.verticalMargin();

// worth - new vertical margin worth.
// noUpdate - if true, kinds won't be up to date.
grid.verticalMargin(worth, noUpdate)

// Finishes batch updates. Updates DOM nodes. It's essential to name it after batch_update.
grid.Commit();

// set/get floating widgets
grid.float(val);

// Disables / allows widgets transferring/resizing.
grid.movable('.grid-stack-item', false);
grid.resizable('.grid-stack-item', true); 

// Get the place of the cell below a pixel on display.
// place - the place of the pixel to resolve in absolute coordinates, as an object with prime and leftproperties
// useOffset - if true, worth might be primarily based on offset vs place (Optionally available. Default false). Helpful when grid is inside place: relative aspect
// Returns an object with properties x and y i.e. the column and row within the grid.
grid.getCellFromPixel(place, useOffset);

// Checks if specified space is empty.
grid.isAreaEmpty(x, y, width, top);

// Locks/unlocks widget.
// el - widget to change.
// val - if true widget might be locked.
grid.locked(el, val);

// Make new widgets after new objects are appended to the grid.
grid.makeWidget(el);

// Set the minWidth/maxWidth for a widget.
grid.minWidth(el, val);
grid.maxWidth(el, val);

// Set the minHeight/maxWidth for a widget.
grid.minHeight(el, val);
grid.maxHeight(el, val);

// Removes widget from the grid.
// detachNode - if false node will not be faraway from the DOM
grid.removeWidget(el, detachNode);

// Removes all widgets from the grid.
// detachNode - if false node will not be faraway from the DOM
grid.removeAll(detachNode);

// Adjustments widget dimension
grid.resize(el, width, top);

// Adjustments widget place
grid.transfer(el, x, y);

// Allows/Disables resizing.
grid.resizable(el, val);

// Allows/Disables transferring.
grid.movable(el, val);

// Updates widget place/dimension.
grid.replace(el, x, y, width, top);

// Returns true if the peak of the grid might be much less the vertical constraint. All the time returns true if grid does not have top constraint.
grid.willItFit(x, y, width, top, autoPosition);

// Toggle the grid animation state.
// doAnimate - if true the grid will animate.
grid.setAnimation(doAnimate);

// Modify variety of columns within the grid
// doNotPropagate - if true present widgets won't be up to date.
// NOTE: Use column() as an alternative in v1.0+
grid.setColumn(column, doNotPropagate);

// Replace widget place/dimension.
grid.setStatic(staticValue);

// Toggle the grid static state
// staticValue - if true the grid turns into static.
grid.replace(el, x, y, width, top));

// Destroy the occasion
// detachGrid - if false nodes and grid won't be faraway from the DOM
grid.destroy([detachGrid]);

// Allows/disables the plugin
grid.allow();
grid.disable();

// Allows/disables widget transferring. includeNewWidgets will pressure new widgets to be draggable as per doEnable's worth by altering the disableDrag grid choice.
grid.enableMove(doEnable, includeNewWidgets);

// Allows/disables widget resizing. includeNewWidgets will pressure new widgets to be resizable as per doEnable's worth by altering the disableResize grid choice. 
grid.enableResize(doEnable, includeNewWidgets);

7. Occasion listeners out there.

$('.grid-stack').on('added', perform(occasion, objects) {
  // after new objects are added
});

$('.grid-stack').on('change', perform(occasion, objects) {
  // fired on change
});

$('.grid-stack').on('disable', perform(occasion) {
  // var grid = occasion.goal;
});

$('.grid-stack').on('dragstart', perform(occasion, ui) {
  // var grid = this;
  // var aspect = occasion.goal;
});

$('.grid-stack').on('dragstop',  perform(occasion, ui) {
  // var grid = this;
  // var aspect = occasion.goal;
});

$('.grid-stack').on('dropped',  perform(occasion, previousWidget, newWidget) {
  // after dropped
});

$('.grid-stack').on('allow',  perform(occasion) {
  // var grid = occasion.goal;
});

$('.grid-stack').on('eliminated',  perform(occasion, objects) {
  // after eliminated
});

$('.grid-stack').on('resizestart',  perform(occasion, ui) {
  // var grid = this;
  // var aspect = occasion.goal;
});

$('.grid-stack').on('gsresizestop',  perform(occasion, objects) {
  // on cease resizing
});

Changelog:

v6.0.2 (2022-09-24)

v6.0.1 (2022-08-28)

v6.0.0 (2022-08-22)

• transformed earlier HTML5 draggable=true primarily based code to easy Mouse Occasions and Contact cellular assist for drag&Drop.
• eliminated all jquery-ui associated code, and D&D plugging as we solely assist native occasions now
• alwaysShowResizeHandle now assist ‘cellular’ which is the default, making it a lot simpler
• modified commit() to be batchUpdate(false) to make it simpler to show batch on/off. up to date doc. previous API stays for now

v5.1.1 (2022-06-17)

v5.1.0 (2022-05-22)

• add GridStack.registerEngine() to let person use their very own customized structure engine subclass. Thanks [Thomas] for sponsoring it.
• grid choice minWidth is now oneColumnSize to make it clearer, however previous discipline will nonetheless work (JS solely) for some time
• fastened restore animation when dragging objects
• up to date jquery-ui to newest v1.13.1

v5.0.0 (2022-01-11)

• add assist dragging into and out of nested grids from dad and mom.
• add new column:’auto’ choice to dimension nested grids to their mother or father grid merchandise column depend, maintaining objects the identical dimension inside and outdoors.
• repair nested.html: dragging between sub-grids present objects clipped
• repair dragging between vertical grids causes an excessive amount of development, not observe mouse.
• repair not pressure rows for min-height

v4.4.1 (2021-12-25)

v4.4.0 (2021-12-22)

• add assist for IE (new es5 folder)
• bugfix

v4.3.1 (2021-10-19)

• repair stop swap throughout resize
• repair save highest decision in 1 column mode
• repair resize when padding is giant vs cellHeight

v4.3.0 (2021-10-16)

• now you can swap objects of various width if they’re the identical row/top
• repair nested grid save inf loop repair

v4.2.7 (2021-09-13)

• Fastened: Allow passing of DragEvent to gridstack dropped occasion.
• Fastened: Format incorrectly restored when node has a minimal width. 
• Fastened: addGrid() doesn’t acknowledge rem cellHeightUnit.

v4.2.6 (2021-07-12)

• fastened: detachable:true working by itself (without having acceptWidgets:true)
• fastened: eliminated drag flicker and scroll difficulty. 
• fastened: save(false) will not have .content material discipline (eliminated present one if current)
• fastened: save(false, false) now accurately saves nested grids
• fastened: save(false, true) adopted by allow() throws error. we now have new Utils.cloneDeep()

v4.2.5 (2021-05-31)

• repair for web site with JQ droppable(‘destroy’) giving error

v4.2.4 (2021-05-30)

• repair detachable:true working once more (broke in 4.x)
• repair staticGrid(false) will now allow drag in habits (if set)
• repair locked merchandise might be person moved/resized once more, simply not pushed by different nodes (broke in 1.1.1)
• repair destroy(false) can now re-init correctly (does not pressure static grid)

v4.2.3 (2021-05-08)

• Utils.getScrollMum or dad() -> getScrollElement() rename
• repair digression on scrolling in v4.2.1

v4.2.2 (2021-04-24)

• repair mac Safari H5 draggable damaged in 4.0.1
• repair mac Safari web page scroll repair

v4.2.1 (2021-04-19)

• fastened: JQ nested grid drag repair damaged in 4.0.3 (however a lot older underlying difficulty)
• fastened: merchandise gs-x:0 not animating repair
• fastened: resize-scroll difficulty when grid shouldn’t be at prime of web page. Thanks @Manfred-on-github
• fastened: repair sizing from prime/left sides

v4.2.0 (2021-04-12)

• fastened: scrollbar repair damaged in 4.x
• fastened: addWidget() whereas in 1 column now remembers authentic wished width
• added: addWidget() now helps nested grids like init/addGrid() does

v4.1.0 (2021-04-08)

• fastened Cannot simply drag widgets under widgets on the underside border of a grid
• when dragging an merchandise on the backside under others to make it simpler to insert under.
• extra repair for drag between 2 grids with row / maxRow damaged in 4.x
• repair export symbols .d.ts for gridstack-h5.js | gridstack-jq.js | gridstack-static.js
• repair right information for utilizing JQ model and ES6 (examined in Angular app)

v4.0.3 (2021-03-29)

• repair load after init() damaged in 4.x
• repair drag between 2 grids with row / maxRow damaged in 4.x
• repair drag edge case in/out single grid with out acceptWidgets repair damaged in 4.x

v4.0.2 (2021-03-28)

• repair: {handles:’w/sw’} work once more in 4.x
• repair: enableMove(T/F) not working accurately
• repair helper: myFunction now working for H5 case for dragInOptions & setupDragIn()
• repair: stop addGrid() from creating nested div grid if container already is a ‘.grid-stack’ div

v4.0.1 (2021-03-21)

• repair JQ resize damaged
• repair serialization of nested grid

v4.0.0 (2021-03-20)

• add drag | resize occasions whereas dragging
• add GridStack.setupDragIn() so person can replace exterior draggable after the grid has been created
• fastened bugs

v3.3.0 (2021-02-03)

• large re-write on how cellHeight() works. now you can name it at any time (not simply grid init choices) together with switching to ‘auto’ or different modes on the fly.
• repair cellHeight:auto now retains cell sq. as window resizes (regressing from 2.x TS conversion). Utils.throttle() works higher too (assured to be referred to as final occasion)
• new cellHeight:preliminary which makes the cell squares initially, however does not change as home windows resizes (higher efficiency)
• new grid choice cellHeightThrottle (100ms) to regulate throttle of auto sizing triggers
• fastened: top too small with cellHeight:auto loading in 1 column. Now detect we load at 1 column and dimension accordingly (default ‘auto’ might make large 700×700 cells, so specific px would possibly nonetheless be wished)
• fastened: loading nested into small dimension and sizing again up
• fastened: nested grid resizing repair
• fastened: H5 resize from left aspect can transfer merchandise proper

v3.2.0 (2021-01-26)

• repair web site & lib works on cellular. We now compile the newest v1.0.8 jquery.ui.touch-punch into the JQ model (solely 2k) so cellular units (android, iphone, ipad, ms floor, and so on…) are supported out of the field. HTML5 model would require re-write to plain mousemove & cellular touchmove as an alternative of drag occasions in a future launch.
• small optimizations (create placeholder content material on the fly, moved extra DD code into draggable class)

v3.1.5 (2021-01-24)

• repair column: N choice now units CSS class
• repair do not permit drop when grid is full
• repair simpler to tug out/in from under
• repair cellHeight() not updating CSS accurately
• repair H5 draggable by precise div deal with moderately than complete merchandise (let content material reply to tug as nicely)

v3.1.4 (2021-01-12)

• repair no-drop cursor on home windows when dragging inside a default grid (no exterior drag in)
• repair Safari H5 delay when dropping objects

v3.1.3 (2021-01-03)

v3.1.2 (2020-12-08)

• repair dragging into a set row grid works higher (test if it’s going to match, else attempt to append, else will not insert)
• doable BREAK (unlikely you employ engine instantly)
• engine constructor takes Choices struct moderately than spelling arguments (simpler to increase/use)
• canBePlacedWithRespectToHeight() -> willItFit() like grid technique
• repair maxW doesn’t work as meant with resizable deal with “w”
• repair assist all choices for brand spanking new dragged in widgets (learn all gs-xyz attributes)
• repair dragging any grid merchandise content material works
• repair web-component fixes & grid with 0 dimension initially. (edited)

v3.1.0 (2020-12-05)

• add new addGrid(mother or father, opts) to create a grid and cargo youngsters as an alternative of init() + load(), which is utilized by load() to helps nested grids creation.
• save() will now work on nested grids, recursively saving information. added flag to additionally permit saving the present grid choices + youngsters (wanted for nested grids) so now you can name new adddGrid() to re-create every thing from JSON.
• fastened: do not name movable()/resizable() on locked objects error. 
• fastened: pressure typescript 3.6 as 3.7+ has breaking change forcing apps to be no less than 3.7 (we solely used one tiny function in latest TS, not definitely worth the incompatibility).

v3.0.0 (2020-11-30)

• Native HTML5 drag&drop plugin included
• Repair placeholder not having customized GridStackOptions.itemClass. thanks @pablosichert
• Repair dragging between 2 grids and again (regression in 2.0.1)
• Repair load() into 1 column mode does not resize again to 12 accurately
• Repair replace(el, opts) re-write to take all GridStackWidget choices (not simply x,y,width,top) and do every thing effectively.
• Hiding locked(), transfer(), resize(), minWidth(), and so on… as they simply merely name replace() which does all of the constrain now as nicely!
• Del ddPlugin grid choice as we solely have one drag&drop plugin at runtime, which is outlined by the embrace you employ (HTML5 vs jquery vs none)
• Change attribute data-gs-min-width is now gs-min-w. We eliminated ‘data-‘ from all attributes, and shorten ‘width|top’ to simply ‘w|h’ to require much less typing and extra environment friendly (2k saved in .js alone!)
• Additionally GridStackWidget utilized in most API width|top|minWidth|minHeight|maxWidth|maxHeight are actually shorter w|h|minW|minH|maxW|maxH

v2.2.0 (2020-11-08)

• add margin choice now assist multi values CSS format ‘5px 10px 0 20px’ or ‘5em 10em’
• add data-gs-static-grid attribute
• repair class=”ui-draggable-disabled ui-resizable-disabled” have been added again to static grid objects, so present CSS rule to type proceed working
• repair getting DOM aspect by id with quantity works (api that makes use of GridStackElement deal with extra string codecs)
• repair setting marginTop (or any 4 sides) to trigger resize to interrupt

v2.1.0 (2020-10-29)

• repair grid static: true to not add any drag&drop (even disabled) which ought to pace issues up, and setStatic(T/F) will now accurately add it again/delete for objects that want it solely.
• Additionally fastened JQ draggable warning if not initialized first
• add addWidget(decide) now handles simply passing a GridStackWidget which creates the default divs, simplifying your code. Previous API nonetheless supported.
• add save(saveContent = true) now permits you to optionally save the HTML content material within the node property, with load() restoring it
• add GridStackWidget.content material now permits you to add any HTML content material when calling load()/save() or addWidget()
• add ColumnOptions to column(n, choices) for a number of re-layout choices, together with ‘none’ that can protect the x and width, till out of certain/overlap

v2.0.2 (2020-10-06)

• repair animate to not re-create CSS type every time (must be sooner too) and made it default now since a lot nicer. move {animate: false} grid choices if you need prompt once more
• repair resizable: { handles: …} forcing alwaysShowResizeHandle habits

v2.0.1 (2020-09-27)

v2.0.0 (2020-09-05)

• re-write to native Typescript, eradicating all JQuery from major code and API (drag&drop plugin nonetheless utilizing jqueryui for now)
• add getGridItems() to return record of HTML grid objects
• add dragInOptions grid attributes to deal with exterior drag&drop objects
• add save() and cargo() to serialize grids from JSON, saving all attributes (not simply w,h,x,y)
• add margin to switch verticalMargin which impacts each dimensions in code, moderately than one in code the opposite in CSS.
• Now you can have good sq. cells (default)
• repair #1299 many columns round-off error
• repair #1102 free performance when they’re moved to a brand new grid
• add elective params to removeWidget() to have quiet mode (no callbacks)

v1.2.1 (2020-09-05)

• Allow the UMD habits for bundlers compatibility

v1.2.0 (2020-05-18)

• repair domAttr shouldn’t be outlined
• provides styleInHead choice to permit for choosing older habits (including STYLE aspect to HEAD aspect as an alternative of parentNode)
• replace jquery to v3.5.1

v1.1.2 (2020-05-18)

• fastened: staticGrid not disable oneColumnMode
• fastened: choices damaged with ember hash helper – thanks @btecu
• fastened: do not take away merchandise from one other grid
• fastened: init() clones handed choices so second does not have an effect on first one
• fastened: addWidget() ignores information attributes

v1.1.1 (2020-04-13)

• jQuery was faraway from the API and dependencies (initialize otherwise, and strategies take/return GridStack or HTMLElement as an alternative of JQuery).
• Up to date Doc accordingly.

v0.6.4 (2020-02-18)

• optimized change callback to avoid wasting authentic x,y,w,h values and solely name those who modified
• extra bugs fastened

This superior jQuery plugin is developed by gridstack. For extra Superior Usages, please test the demo web page or go to the official web site.