Space Drop: Better Drag & Drop 1 7 6

Posted on  by

Gridstack.js is a vanilla JavaScript widget/grid layout plugin inspired by Gridster that allows you to dynamically and responsively rearrange grid items through drag and drop.

$ begingroup$ @JZYL, higher aspect ratio reduces induced drag at cost of some increase in form drag. Induced drag decreases with square of speed, while form drag increases with square of speed. So high aspect ratio give better max L/D, but at lower speed, while at higher speed the total drag increases due to the higher form drag.

Note: The library now works as a Vanilla JavaScript plugin. You can also download the jQuery Version here for jQuery projects.

Space Drop: Better Drag & Drop 1 7 60

  • I use cut and paste quite a lot, which I believe has the same effect as drag and drop, and the cut stops if the paste fails for whatever reason. If a file can't be transferred, there's a warning message box then when I look at the old folder, the file I was warned about is top of the list.
  • Drag-and-drop functionality is the bread and butter of a modern web UX. It’s an aspect of the API, part of the HTML standard. Lots of UI libraries provide it out of box. Sometimes, though, we.

More features:

  • Also supports touch events.
  • Resizable grid items.
  • Supports nested grid items.
  • Compatible with Bootstrap 3/4 framework.
  • No jQuery required (v2.0.0+)

View more:

Table Of Contents:

Basic Usage (Vanilla JS Version):

1. Install & Download the package.

2. Include the necessary JavaScript and CSS files on the page.

Space Drop: Better Drag & Drop 1 7 6

3. Insert optional grid items to the Grid Stack container and pass the options via data-option attributes as follows:

4. Initialize the plugin and done.

5. All default options.

6. API methods.

7. Event handlers.

Basic Usage (jQuery Version):

1. Include jQuery library and other required resources in the the document.

  • jQuery
  • jQuery UI
  • jQuery UI Touch Punch: for touch support (OPTIONAL)
  • gridstack.poly.js: for IE and older browsers (OPTIONAL)

Space Drop: Better Drag & Drop 1 7 64

2. Include the jQuery Gridstack.js plugin and other required resources at the end of the document.

3. Create a sample draggable grid layout as follows.

  • data-gs-animate: turns animation on (for grid)
  • data-gs-column: amount of columns (for grid)
  • data-gs-max-row: maximum rows amount, defaults to 0 (for grid)
  • data-gs-current-height: current rows amount (for grid)
  • data-gs-id: unique ID (for item)
  • data-gs-x, data-gs-y: element position (for item)
  • data-gs-width, data-gs-height: element size (for item)
  • data-gs-max-width, data-gs-min-width, data-gs-max-height,t remove item from another grid
  • fixed: init() clones passed options so second doesn't affect first one
  • fixed: addWidget() ignores data attributes

v1.1.1 (2020-04-13)

Space Drop: Better Drag & Drop 1 7 62x39

  • jQuery was removed from the API and dependencies (initialize differently, and methods take/return GridStack or HTMLElement instead of JQuery).
  • Updated Doc accordingly.

v0.6.4 (2020-02-18)

  • optimized change callback to save original x,y,w,h values and only call those that changed
  • more bugs fixed

This awesome jQuery plugin is developed by gridstack. For more Advanced Usages, please check the demo page or visit the official website.

  • Prev: jQuery Plugin For Animated Fixed Elements - Butterfly
  • Next: Cross Browser jQuery One Page Navigation / Smooth Scrolling Plugin - Full Scroll