https://github.com/radekvym/draggable-grid-js
JavaScript control that allows you to arrange items into a grid and to move between them by dragging.
https://github.com/radekvym/draggable-grid-js
animations component control drag draggable draggable-elements grid-layout javascript javascript-library web
Last synced: 11 months ago
JSON representation
JavaScript control that allows you to arrange items into a grid and to move between them by dragging.
- Host: GitHub
- URL: https://github.com/radekvym/draggable-grid-js
- Owner: RadekVyM
- License: mit
- Created: 2022-07-15T19:03:15.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T11:23:10.000Z (about 1 year ago)
- Last Synced: 2025-03-31T12:01:35.650Z (about 1 year ago)
- Topics: animations, component, control, drag, draggable, draggable-elements, grid-layout, javascript, javascript-library, web
- Language: JavaScript
- Homepage: https://radekvym.github.io/Draggable-Grid-JS
- Size: 46.2 MB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Draggable Grid
JavaScript control that allows you to arrange items of an unordered list into a grid and to move between them by dragging.
[](https://radekvym.github.io/Draggable-Grid-JS/index.html)
See [live demo](https://radekvym.github.io/Draggable-Grid-JS/index.html).
## Usage
Import styles needed for the control to function properly:
``` html
```
Wrap an unordered list in a `div` with `draggable-grid` class:
``` html
...
```
Parameters of the control can be set via data attributes:
- `data-orientation` - `horizontal` or `vertical` orientation
- `data-span` - number of rows or columns (depends on orientation)
- `data-cell-size-ratio` - width to height ratio of the cell size
- `data-max-cell-size` - how much screen space a cell can occupy (`width height`, 0-1 values)
Import a JavaScript script:
``` html
```
Initialize the control when the page is loaded:
``` html
window.addEventListener("load", () => {
const draggableGridDivs = document.body.querySelectorAll("div.draggable-grid");
// Initialization of the control
for (const div of draggableGridDivs) {
DraggableGrid.initDraggableGridFor(div);
}
});
```
> For more advanced usage, see the [sample source code](index.html) or the [library source code](./src/DraggableGrid.js). The control's public API is accessible via methods without an underscore.