JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

.draggable {
    background-color: red;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
}
.row {
    float: left;
    width: 20px;
    height: 20px;
    margin: 1px;
    border: 1px solid blue;
}
.clear {
    clear: both;
}

JavaScript

$(document).ready(function () {
    var i,
    start,
    div,
    container = document.getElementById('container');

    div = document.createElement('div');
    div.className = 'row';
    div.innerHTML = '<div class="draggable"></div>';
    container.appendChild(div);

    for (i = 2; i <= 60000; i++) {
        div = document.createElement('div');
        div.className = 'row';
        container.appendChild(div);
        if (i % 30 === 0) {
            div = document.createElement('div');
            div.className = 'clear';
            container.appendChild(div);
        }
    }

    $(document).on('mouseup', function () {
        start = Date.now();
    });

    $(document).on('mouseenter', '.draggable', function () {
        $(this).draggable({
            revert: 'invalid',
            scroll: true,
            containment: '#container'
        });
    });

    $('#container').droppable({
        greedy: false,
        accept: '.draggable',
        drop: function () {
            console.log('After mouse release, droppable drop was called in ' + (Date.now() - start) + 'ms');
        }
    });

});