JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
    <tr>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
        <td class="draggable">15min</td>
    </tr>
 ...

CSS

.selected {
    background-color: green;
}

JavaScript

(function ($) {
    //http://stackoverflow.com/a/2700029
    $.fn.disableSelection = function () {
        return this.attr('unselectable', 'on')
            .css('user-select', 'none')
            .on('selectstart', false);
    };
    $.fn.enableSelection = function () {
        return this.attr('unselectable', 'off')
            .css('user-select', 'inherit')
            .off('selectstart');
    };

    var state = 'none';

    function selectOrDeselect() {
        if (state === 'select') {
            $(this).addClass('selected');
        } else if (state == 'deselect') {
            $(this).removeClass('selected');
        }
    }

    $.fn.dragHighlight = function (className) {
        var self = this;
        className = className || 'selected';
        $(self).on('mouseover', selectOrDeselect).on('mousedown', function () {
            //first element to get dragged
            state = ($(this).hasClass(className) ? 'deselect' : 'select');
            $(self).disableSelection();
            selectOrDeselect.bind(this).call();
            //start listening for the end
            $(document).on('mouseup', function () {
                state = 'none';
                $(self).enableSelection();
                $(document).off('mouseup');
            });
        });
    }

})(jQuery);

$(document).ready(function () {
    $(".draggable").dragHighlight();
});