JSFiddle - React, Tailwind, and code Playground

by redbmk

HTML

<table id="jquery-drag-to-select-example">
    <tr>
        <td><img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /></td>
        <td><img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" /></td>
        <td><img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="PS2" /></td>
    </tr>
</table>

JavaScript

jQuery.fn.dragToSelect = function (conf) {
    var c = typeof(conf) == 'object' ? conf : {};

    // Config
    var config = jQuery.extend({
        className:        'jquery-drag-to-select', 
        activeClass:    'active', 
        disabledClass:    'disabled', 
        selectedClass:    'selected', 
        scrollTH:        10, 
        percentCovered:    25, 
        selectables:    false, 
        autoScroll:        false, 
        selectOnMove:    false, 
        onShow:            function () {return true;}, 
        onHide:            function () {return true;}, 
        onRefresh:        function () {return true;}
    }, c);

    var realParent    = jQuery(this);
    var parent        = realParent;

    do {
        if (/auto|scroll|hidden/.test(parent.css('overflow'))) {
            break;
        }
        parent = parent.parent();
    } while (parent[0].parentNode);

    // Does user want to disable dragToSelect
    if (conf == 'disable') {
        parent.addClass(config.disabledClass);
        return this;
    }
    else if (conf == 'enable') {
        parent.removeClass(config.disabledClass);
        return this;
    }

    var parentOffset    = parent.offset();
    var parentDim        = {
        left:    parentOffset.left, 
        top:    parentOffset.top, 
        width:    parent.width(), 
        height:    parent.height()
    };

    // Current origin of select box
    var selectBoxOrigin = {
        left:    0, 
        top:    0
    };

    // Create select box
    var selectBox = jQuery('<div/>')
                        .appendTo(parent)
                        .attr('class', config.className)
                        .css('position', 'absolute');

    // Shows the select box
    var showSelectBox = function (e) {
        if (parent.is('.' + config.disabledClass)) {
            return;
        }

        selectBoxOrigin.left    = e.pageX - parentDim.left + parent[0].scrollLeft;
        selectBoxOrigin.top        = e.pageY - parentDim.top...