JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab 1</a></li>
<li><a href="#tabs-2">tab 2</a></li>
<li><a href="#tabs-3">tab 3</a></li>
</ul>
<div id="tabs-1">
<div class="column" id="1">
<div class="widget" id="w_1">
<div class="widget-header">Feeds</div>
<div class="widget-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="widget" id="w_2">
<div class="widget-header">News</div>
<div class="widget-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column" id="2">
<div class="widget" id="w_3">
<div class="widget-header">Shopping</div>
<div class="widget-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column" id="3">
<div class="widget" id="w_4">
<div class="widget-header">Links</div>
<div class="widget-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="widget" id="w_5">
<div class="widget-header">Images</div>
<div class="widget-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
<div id="tabs-2">
tab 2 content goes here
</div>
<div id="tabs-3">
tab 3 content goes here
</div>
</div>
JavaScript
$("#tabs").tabs();
$(".column").sortable({
connectWith: '.column',
update: function(event, ui) {
alert($(this).closest("div").attr("id"));
alert($(this).sortable('serialize', {
key: 'item'
}));
}
});
$(".column").disableSelection();