JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="parent">
    <div class="child-droppable">
    </div>
    <div class="child-droppable">
    </div>
    <div class="child-droppable">
    </div>
</div>

<div class="dragme">
</div>

CSS

#parent {
    width: 500px;
    padding: 50px;
    background-color: #f00;
}

.child-droppable {
    width: 150px;
    height: 150px;
    background-color: #0f0;
}

.dragme {
    width: 100px;
    height: 100px;
    background-color: #00f;
}

#parent.ui-state-hover, 
.child-droppable.ui-state-hover {
    background-color: #ff0;
}

JavaScript

$.extend( $.ui.ddmanager, {
	drag: function(draggable, event) {

		//If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
		if(draggable.options.refreshPositions) {
			$.ui.ddmanager.prepareOffsets(draggable, event);
		}

		//Run through all droppables and check their positions based on specific tolerance options
		$.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {

			if(this.options.disabled || this.greedyChild || !this.visible) {
				return;
			}

			var parentInstance, scope, parent,
				intersects = $.ui.intersect(draggable, this, this.options.tolerance),
				c = !intersects && this.isover ? "isout" : (intersects && !this.isover ? "isover" : null);
			if(!c) {
				return;
			}

			if (this.options.greedy) {
				// find droppable parents with same scope
				scope = this.options.scope;
				parent = this.element.parents(":data(ui-droppable)").filter(function () {
					return $.data(this, "ui-droppable").options.scope === scope;
				});

				if (parent.length) {
					parentInstance = $.data(parent[0], "ui-droppable");
					parentInstance.greedyChild = (typeof parentInstance['movedintogreedychildinthisloop'] !== 'undefined') || (c === "isover");
				}
			}

			// we just moved into a greedy child
			if (parentInstance && c === "isover") {
				parentInstance.isover = false;
				parentInstance.isout = true;
				parentInstance.movedintogreedychildinthisloop = true;
				parentInstance._out.call(parentInstance, event);
			}

			this[c] = true;
			this[c === "isout" ? "isover" : "isout"] = false;
			this[c === "isover" ? "_over" : "_out"].call(this, event);

			// we just moved out of a greedy child
			if (parentInstance && c === "isout" && typeof parentInstance['movedintogreedychildinthisloop'] === 'undefined') {
				parentInstance.isout = false;
				parentInstance.isover = true;
				parentInstance._over.call(parentInstance,...