JSFiddle - React, Tailwind, and code Playground
HTML
<section class="userview-right" id="tabs">
<h1>Words</h1>
<div id="tabs">
<ul id="tabs-nav">
<li><a href="#tabs-1">list 1</a></li>
<li><a href="#tabs-2">list 2</a></li>
<li><a href="#tabs-3">Deleted</a></li>
</ul>
<div id="tabs-1">
<ul class="word-list">
<li class="ui-state-default">
list 1
</li>
</ul>
</div>
<div id="tabs-2">
<ul class="word-list">
<li class="ui-state-default">
list 2
</li>
</ul>
</div>
<div id="tabs-3">
<ul class="word-list">
<li class="ui-state-default">
deleted
</li>
</ul>
</div>
</div>
</section>
CSS
ul {
list-style: none;
padding: 0;
}
JavaScript
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
placeholder: "ui-state-highlight"
}).disableSelection();
// Words tabs
var $tabs = $("#tabs").tabs();
// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
accept: ".word-list li",
hoverClass: "ui-state-hover",
tolerance: 'pointer',
drop: function(event,ui) {
var $item = $(this);
var $list = $($item.find("a").attr("href")).find(".word-list");
ui.draggable.hide("fast", function() {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow");
});
}
/*over: function(event,ui) {
var $item = $(this);
var $list = $($item.find("a").attr("href")).find(".word-list");
$tabs.tabs("option", "active", $tab_items.index($item));
ui.draggable.appendTo($list).show("slow");
}*/
});