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">
		<div id="draggable" class="ui-widget-content">
			<p>Drag me to my target</p>
		</div>
		<div id="droppable" class="ui-widget-header">
			<p>Drop here</p>
		</div>
	</div>

CSS

#draggable {
	width: 100px;
	height: 100px;
	padding: 0.5em;
	float: left;
	margin: 10px 10px 10px 0;
}

#droppable {
	width: 150px;
	height: 150px;
	padding: 0.5em;
	float: left;
	margin: 10px;
}

JavaScript

$(function() {

	var controller = {

		__name: 'Drag&DropController',

		// 初期化処理
		__ready: function() {
			var that = this;

			$('#draggable').draggable();
			$('#droppable').droppable({
				drop: that.ownWithOrg(that.drop),
        out: that.ownWithOrg(that.blur)
			});
		},

		// 要素がドロップされた時のコールバック
		drop: function(org, event, ui) {
			$(org).addClass('ui-state-highlight').find('p').html('Dropped!');
		},
    blur: function(org, event, ui) {
    	$(org).removeClass('ui-state-highlight').find('p').html('Drop here');
    }
	};

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