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 class="checkcol"></th>
            <th>Col 1</th>
            <th>Col 2</th>
        </thead>
        <tbody>
            <tr>
                <td><label>Select<input type="checkbox" value="1" /></label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label for="two">Select</label><input type="checkbox" name="two" value="2" /></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label>Select<input type="checkbox" value="3" /></label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label for="four">Select</label><input type="checkbox" name="four" value="4" /></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label>Select<input type="checkbox" value="5" /></label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label for="six">Select</label><input type="checkbox" name="six" value="6" /></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label>Select<input type="checkbox" value="7" /></label></td>
                <td>Col 1 data</td>
                <td>Col 2 data</td>
            </tr>
            <tr>
                <td><label for="eight">Select</label><input type="checkbox" name="eight" value="8" /></td>
  ...

CSS

.checkcol {
    width: 90px;
}

label {
    display: inline;
}

input {
    margin-left: 5px !important;
}

JavaScript

// Load the script from github (jsfiddle doesn't like text/plain as an external res)
$.getScript('https://raw.github.com/aleximplode/dragcheck/master/dragcheck.js', function() {
    // Wait a sec to make sure it has finished loading
    setTimeout(function() {
        $('h3').text('It should work now');
        
        (function ($) {
    $.fn.dragcheck = function (options) {
        
        var opts = $.extend({}, $.fn.dragcheck.defaults, options);

        return this.each(function () {
            var $this = $(this);

            var enabled = false;
            var state = false;
            var startIndex = null;
            
            // meta data plugin support
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            $(':checkbox, :checkbox ~ label', $this)
                .mousedown(function () {
                    var $obj = $(this);
                    enabled = true;
                    state = !$obj.is(':checked');
                    startIndex = (o.container ? $obj.parents(o.container).index() : $obj.index());

                    $obj.one('mouseout', function () {
                        if (enabled) {
                            o.onSelect($(this), state);
                        }
                    });
                })
                .mouseover(function () {
                    if (enabled) {
                        var $obj = $(this);
                        var sourceRow = (o.container ? $obj.parents(o.container) : $obj);
                        var targetRow = (o.container ? $obj.parents(o.container).parent().children(o.container).eq(startIndex) : $obj.parent().children(':checkbox').eq(startIndex));

                        var endIndex = sourceRow.index();
                        if (endIndex > startIndex) {
                            var prevelements = sourceRow.prevUntil(targetRow, o.container || ':checkbox');
                            o.onSelect((o.container ? targetRow.find(':checkbox') :...