JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css">
<div class="demo">
<div id="tabs" class="danFloat">
<ul>
<li><a href="#tabs-1">Why Dano is Great</a></li>
<li><a href="#tabs-2">Why Dano is Wise</a></li>
<li><a href="#tabs-3">Test</a></li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
<li class="ui-state-default">Item 9</li>
<li class="ui-state-default">Item 10</li>
<li class="ui-state-default">Item 11</li>
<li class="ui-state-default">Item 12</li>
<li class="ui-state-default">Item 13</li>
<li class="ui-state-default">Item 14</li>
<li class="ui-state-default">Item 15</li>
<li class="ui-state-default">Item 16</li>
<li class="ui-state-default">Item 17</li>
<li class="ui-state-default">Item 18</li>
<li class="ui-state-default">Item 19</li>
<li class="ui-state-default">Item 20</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight"></li>
</ul>
</div>
<div id="tabs-3">
<ul id="sortable3" class="connectedSortable ui-helper-reset">
</ul>
...
CSS
#sortable1 li, #sortable2 li, #sortable3 li { margin: 0 3px 3px 3px; padding: 1px; float: left; font-size: .5em; height: 10px; width: 120px; }
.MultiSort-selected {
cursor: move !important;
color: Red !important;
}
.danFloat
{
float: left;
}
JavaScript
//Author: Ethan Atlakson
//Last Revision 10/8/2010
//multi-selectable, multi-sortable jQuery plugin
//jquery.multisortable.js
jQuery.fn.multiselectable = function(options) {
if (!options) { options = {}; }
options = jQuery.extend({
click: function(event, elem) { },
selectedClass: 'selected'
}, options);
return this.each(function() {
var t = jQuery(this);
if (!jQuery(t.children()).data('multiselectable')) {
jQuery(t.children()).data('multiselectable', true);
jQuery(t.children()).click(function(e) {
var parent = jQuery(this).parent();
var myIndex = jQuery(parent.children()).index(jQuery(this));
var prevIndex = jQuery(parent.children()).index(jQuery('.multiselectable-previous', parent));
if (!e.ctrlKey) { jQuery('.' + options.selectedClass, parent).removeClass(options.selectedClass); }
if (e.shiftKey && prevIndex >= 0) {
jQuery('.multiselectable-previous', parent).toggleClass(options.selectedClass);
if (prevIndex < myIndex) {
jQuery(this).prevUntil('.multiselectable-previous').toggleClass(options.selectedClass);
}
else {
jQuery(this).nextUntil('.multiselectable-previous').toggleClass(options.selectedClass);
}
}
jQuery(this).toggleClass(options.selectedClass);
jQuery('.multiselectable-previous', parent).removeClass('multiselectable-previous');
jQuery(this).addClass('multiselectable-previous');
options.click(e, $(this));
}).disableSelection();
}
});
};
jQuery.fn.multisortable = function (options) {
if (!options) { options = {}; }
var settings = jQuery.extend({
start: function (event, ui) { },
stop: function (event, ui) { },
sort:...