JSFiddle - React, Tailwind, and code Playground

by craga89

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<div id="container"></div>

<div class="draggable">
    <span>Non-exclusive</span>
</div>

<div class="draggable exclusive">
    <span>Exclusive</span>
</div>

CSS

* { font-family: sans-serif; font-size: 13px; color: #333 }

#container{
    position: relative;
    width: 80%;
}

.droppable{
    position: relative;
    display: inline-block;
    width: 75px;
    height: 75px;
    margin: 5px;
    background-color: rgba(255, 100, 0, 0.5);
    line-height: 75px;
    text-align: center;
    vertical-align: middle;
}

.droppable:before{
    content: attr(id);
    position: absolute;
    top: 3px; left: 3px;
    font-size: 10px;
    line-height: 10px;
}

.droppable.active{ background-color: rgba(255, 100, 0, 0.6); }
.droppable.hover{ background-color: rgba(255, 100, 0, 1); }

.draggable{
    position: absolute;
    top: 10px; left: calc(100% - 150px);
    width: 140px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    background-color: rgba(0, 100, 255, 0.5);
}

.draggable span{
    display: inline-block;
	line-height: 1.5em;
    vertical-align: middle;
}

.draggable:after{
    position: absolute;
    width: 60%;
    height: 60%;
    background-color: rgba(0, 0, 0, 0.2);
}

.draggable.nw:after{ top: 0; left: 0; content: ' '; }
.draggable.ne:after{ top: 0; right: 0; content: ' '; }
.draggable.se:after{ bottom: 0; right: 0; content: ' '; }
.draggable.sw:after{ bottom: 0; left: 0; content: ' '; }

.draggable .hitpoint{
    position: absolute;
    background-color: black;
    content: '';
    height: 4px; width: 2px;
    margin: -2px;
}

.draggable.exclusive{
    top: 100px;
}
















.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JavaScript

var $container = $('#container');

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "jqueryui"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"), require("jqueryui"));
    } else {
        root.Requester = factory(root.$, root.$.ui);
    }
}
(this, function ($) {

	$.widget('ui.droppable', $.ui.droppable, {
		_over: function(event, ui) {
			var result = this._super.apply(this, arguments);

			// If the droppable is exclusive...
			var current = $.ui.ddmanager.current;
			if(current.options.exclusive) {
				// Keep track of the hovered, active droppables via jQuery array
				current._$activeDroppables = current._$activeDroppables.add(this.element);

				// Remove the added hover class, as this is taken care of in the
				// draggable exclusivity logic
				this.element.removeClass(this.options.hoverClass);
			}

			// super()
			return result;
		},

		_drop: function(event, ui) {
			// If the draggable is exclusive, ensure we only call the actual `drop` callback
			// for the target matched by the exclusivity logic, stored in `draggable._$target`.
			var current = $.ui.ddmanager.current;
			if(current.options.exclusive && current._$target[0] !== this.element[0]) {
				return;
			}

			// super()
			return this._super.apply(this, arguments);
		},

		_out: function(event, ui) {
			var current = $.ui.ddmanager.current;
			if(current.options.exclusive) {
				current._$activeDroppables = current._$activeDroppables.not(this.element);
			}

			// super()
			return this._super.apply(this, arguments);
		}
	});

	$.widget('ui.draggable', $.ui.draggable, {

		options: $.extend($.ui.droppable.prototype.options, {
			// Number of pixels the mouse must move in order to the directionality of the
			// cursor to be re-calculated.
			mouseThreshold: 5,

			// Amount of comparable axis movement needed in order to consider the movement of the mouse
			// a majority...