JSFiddle - React, Tailwind, and code Playground

by arch

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<h3>Feature should work after a second</h3>

<div class="container">
    <table class="table table-striped table-condensed">
        <thead>
            <th></th>
            <th>Col 1</th>
            <th>Col 2</th>
        </thead>
        <tbody>
            <tr>
                <td><label><input type="checkbox" value="1" />Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="2" name="two" /><label for="two">Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label><input type="checkbox" value="3" />Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="4" name="four" /><label for="four">Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label><input type="checkbox" value="5" />Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="6" name="six" /><label for="six">Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label><input type="checkbox" value="7" />Label</label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="8" name="eight" /><label for="eight">Label</label></td>
                <td>Col 1...

CSS

label {
    display: inline-block;
}

JavaScript

$('label, tr, table').disableSelection();

// Load the script from github (jsfiddle doesn't like text/plain as an external res)
$.getScript('https://raw.github.com/aleximplode/dragcheck/labelSelect/dragcheck.js', function() {
    // Wait a sec to make sure it has finished loading
    setTimeout(function() {
        $('h3').text('It should work now');
        
        $('table tbody').dragcheck({
            container: 'tr',
            labelSelect: true,
            onSelect: function($obj, state) {
                if($obj.is(':checked') != state) {
                    $('#log').prepend('Check: ' + $obj.val() + ' ' + state + '<br />');
                    $obj.prop('checked', state);
                    
                    if(state) {
                        $obj.parents('tr').addClass('info', 'slow');
                    }
                    else {
                        $obj.parents('tr').removeClass('info', 'slow');                        
                    }
                }
            }
        });
    }, 1000);
});