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">
<script src="//cdnjs.cloudflare.com/ajax/libs/html5sortable/0.1.1/html.sortable.min.js"></script>
<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

$('#example').sortable({
    items: ':not(.disabled)',
    forcePlaceholderSize: true
});