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-res/ext/bootstrap/3.3.0/css/bootstrap.min.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)
            });
        },

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

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