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 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:

<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.