Awesome
Draggable Grid
JavaScript control that allows you to arrange items of an unordered list into a grid and to move between them by dragging.
See live demo.
Usage
Import styles needed for the control to function properly:
<link rel="stylesheet" href="./draggableGrid.css">
Wrap an unordered list in a div
with draggable-grid
class:
<div
class="draggable-grid"
data-orientation="horizontal"
data-span="4"
data-cell-size-ratio="3/4"
data-max-cell-size="0.65 0.7">
<ul>
...
</ul>
</div>
Parameters of the control can be set via data attributes:
data-orientation
-horizontal
orvertical
orientationdata-span
- number of rows or columns (depends on orientation)data-cell-size-ratio
- width to height ratio of the cell sizedata-max-cell-size
- how much screen space a cell can occupy (width height
, 0-1 values)
Import a JavaScript script:
<script src="./DraggableGrid.js"></script>
Initialize the control when the page is loaded:
<script>
window.addEventListener("load", () => {
const draggableGridDivs = document.body.querySelectorAll("div.draggable-grid");
// Initialization of the control
for (const div of draggableGridDivs) {
DraggableGrid.initDraggableGridFor(div);
}
});
</script>
For more advanced usage, see the sample source code or the library source code. The control's public API is accessible via methods without an underscore.