JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<script src="https://cdn.rawgit.com/metafizzy/packery/master/dist/packery.pkgd.js"></script>
<script src="https://cdn.rawgit.com/desandro/draggabilly/master/dist/draggabilly.pkgd.js"></script>
<div>
    <ul id="cont">
        <li><div class="handle"></div>1</li>
        <li><div class="handle"></div>2</li>
        <li><div class="handle"></div>3</li>
        <li><div class="handle"></div>4</li>
        <li><div class="handle"></div>5</li>
        <li><div class="handle"></div>6</li>
        <li><div class="handle"></div>7</li>
        <li><div class="handle"></div>8</li>
        <li><div class="handle"></div>9</li>
        <li><div class="handle"></div>10</li>
        <li><div class="handle"></div>11</li>
        <li><div class="handle"></div>12</li>
        <li><div class="handle"></div>13</li>
        <li><div class="handle"></div>14</li>
        <li><div class="handle"></div>15</li>
    </ul>
</div>

SCSS

div{
    width: 400px;
}

ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
li {
    outline: 1px solid red;
    height: 100px;
    width: 100px;
    &:nth-child(-n+2) {
        outline: 1px solid green;
        height: 50px;
    }
        
         &:nth-child(7) {
        width: 200px;
    }
}

.handle{
    height: 20px;
    width: 20px;
    outline: 1px solid blue;
}

JavaScript

var pckry =new Packery( '#cont', {});

var nums = document.getElementById("cont");
var listItem = nums.getElementsByTagName("li");
for (var i=0; i < listItem.length; i++) {
    var draggie = new Draggabilly(listItem[i], {handle: '.handle'});
        // bind Draggabilly events to Packery
        pckry.bindDraggabillyEvents( draggie );


        pckry.layout();
}