JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<link rel="stylesheet" href="http://thomasf.github.io/solarized-css/solarized-light.min.css">
<ul id="example">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="disabled">Item 3</li>
    <li class="disabled">Item 4</li>
    <li class="disabled">Item 5</li>
    <li>Item 6</li>
</ul>

CSS

header, section {
    display: block;
}
#features {
    margin: auto;
    width: 460px;
    font-size: 0.9em;
}
.connected, .sortable, .exclude, .handles {
    margin: auto;
    padding: 0;
    width: 310px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sortable.grid {
    overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    font-family:"Tahoma";
    color: #1C94C4;
    margin: 5px;
    padding: 5px;
    height: 22px;
}
.handles span {
    cursor: move;
}
li.disabled {
    opacity: 0.5;
}
.sortable.grid li {
    line-height: 80px;
    float: left;
    width: 80px;
    height: 80px;
    text-align: center;
}
li.highlight {
    background: #FEE25F;
}
#connected {
    width: 440px;
    overflow: hidden;
    margin: auto;
}
.connected {
    float: left;
    width: 200px;
}
.connected.no2 {
    float: right;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    padding: 2px;
    margin: 2px;
}
li.blat {
    background-color: #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius:;
    border-radius:;
}

JavaScript

/*
 * HTML5 Sortable jQuery Plugin
 * https://github.com/voidberg/html5sortable
 *
 * Original code copyright 2012 Ali Farhadi.
 * This version is mantained by Alexandru Badiu <[email protected]>
 *
 * Thanks to the following contributors: andyburke, bistoco, daemianmack, drskullster, flying-sheep, OscarGodson, Parikshit N. Samant, rodolfospalenza, ssafejava
 *
 * Released under the MIT license.
 */
    'use strict';

(function ($) {
    var dragging, draggingHeight, placeholders = $();
    $.fn.sortable = function (options) {
        var method = String(options);

        options = $.extend({
            connectWith: false,
            placeholder: null,
            dragImage: null
        }, options);

        return this.each(function () {
            if (method === 'reload') {
                $(this).children(options.items).off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
            }
            if (/^enable|disable|destroy$/.test(method)) {
                var citems = $(this).children($(this).data('items')).attr('draggable', method === 'enable');
                if (method === 'destroy') {
                    $(this).off('sortupdate');
                    $(this).removeData('opts');
                    citems.add(this).removeData('connectWith items')
                        .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s').off('sortupdate');
                }
                return;
            }

            var soptions = $(this).data('opts');

            if (typeof soptions === 'undefined') {
                $(this).data('opts', options);
            } else {
                options = soptions;
            }

            var $this = $(this),
                items = $this.children(options.items),
                allitems = $this.children()

                var isHandle, index;
            var startParent, newParent;
            var placeholder = (options.placeholder === null) ? $('<'...