JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.css">
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
	<div id="container" style="padding: 30px;">
		<div class="column">
			<div class="portlet">
				<div class="portlet-header">Feeds</div>
				<div class="portlet-content" style="height: 320px;">Lorem
					ipsum dolor sit amet, consectetuer adipiscing elit</div>
			</div>
			<div class="portlet">
				<div class="portlet-header">News</div>
				<div class="portlet-content">Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit</div>
			</div>
		</div>
		<div class="column">
			<div class="portlet">
				<div class="portlet-header">Shopping</div>
				<div class="portlet-content">Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit</div>
			</div>
		</div>
		<div class="column">
			<div class="portlet">
				<div class="portlet-header">Links</div>
				<div class="portlet-content">Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit</div>
			</div>
			<div class="portlet">
				<div class="portlet-header">Images</div>
				<div class="portlet-content">Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit</div>
			</div>
		</div>
		<ul id="list" style="list-style: none;"></ul>
	</div>

CSS

.column {
	width: 220px;
	float: left;
	padding-bottom: 100px;
}

.portlet {
	margin: 0 1em 1em 0;
}

.portlet-header {
	margin: 0.3em;
	padding-bottom: 4px;
	padding-left: 0.2em;
}

.portlet-header .ui-icon {
	float: right;
}

.portlet-content {
	padding: 0.4em;
}

.ui-sortable-placeholder {
	border: 1px dotted black;
	visibility: visible !important;
	height: 50px !important;
}

.ui-sortable-placeholder * {
	visibility: hidden;
}

JavaScript

$(function() {

	var controller = {

		__name: 'SortableController',

		__ready: function() {
			var that = this;
			$('.column').sortable({
				connectWith: '.column',
				stop: that.own(that.stop)
			});

			$('.portlet').addClass('ui-widget ui-widget-content ui-helper-clearfix ui-corner-all')
					.find('.portlet-header').addClass('ui-widget-header ui-corner-all').prepend(
							'<span class="ui-icon ui-icon-minusthick"></span>').end().find(
							'.portlet-content');

			$('.portlet-header .ui-icon').click(function() {
				$(this).toggleClass('ui-icon-minusthick').toggleClass('ui-icon-plusthick');
				$(this).parents('.portlet:first').find('.portlet-content').toggle();
			});

			$('.column').disableSelection();
		},

		stop: function(event, ui) {
			var target = $(ui.item);
			$('#list').append('<li>' + target.find('.portlet-header').text() + 'が移動しました。</li>');
		}
	};

	// コントローラの作成と要素へのバインド.
	h5.core.controller('#container', controller);
});