JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<script src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script>
<script src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script>
<div class="timeLine">
    <div class="timeItem" id="r1"></div>
    <div class="timeItem" id="r2"></div>
    <div class="timeItem" id="r3"></div>
    <div class="timeItem" id="r4"></div>
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
}
.timeLine {
    background: orange;
    position: relative;
    left: 0px;
    top: 0px;
    height : 200px;
    overflow:hidden;
    width: 600px;
    padding: 0;
}
.timeItem {
    background: green;
    border-radius: 5px;
    position: absolute;
    height : 50px;
    width: 50px;
    left: 0px;
    top: 0px;
    opacity: .7;
}
.timeItem:hover{
    opacity: 1;
}
.ui-resizable-handle{
    width: 15px
}
#r1{
    left: 50px;
    top: 150px;
}
#r2{
    left: 150px;
    top: 50px;
}
#r3{
    left: 100px;
    top: 100px;
}
#r4{
    left: 0px;
    top: 0px;
}

JavaScript

$(".timeItem").draggable({
    containment: "parent",
    cursor: "move",
    snap: ".ui-widget-header",
    grid: [ 50, 50 ],
    obstacle: ".not",
    preventCollision: true,
    drag: function() {
        $('.timeLine .timeItem').css('background','gray');
        $(this).css('background','green');
        $('.timeLine .timeItem').addClass('not');
        $(this).removeClass('not');
    },
    stop: function() {
        $('.timeLine .timeItem').css('background','green');
        $('.timeLine .timeItem').removeClass('not');
    }
}).resizable({
    handles: "e,w",
    containment: "parent",
    minHeight: 50,
    minWidth: 50,

});
	$(function() {
		$(".timeItem").resizable({
			grid: 50
		});
	});




/*
 * jQuery UI Resizable 1.7.2
 *
 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI/Resizables
 *
 * Depends:
 *	ui.core.js
 */
(function($) {

$.widget("ui.resizable", $.extend({}, $.ui.mouse, {

	_init: function() {

		var self = this, o = this.options;
		this.element.addClass("ui-resizable");

		$.extend(this, {
			_aspectRatio: !!(o.aspectRatio),
			aspectRatio: o.aspectRatio,
			originalElement: this.element,
			_proportionallyResizeElements: [],
			_helper: o.helper || o.ghost || o.animate ? o.helper || 'ui-resizable-helper' : null
		});

		//Wrap the element if it cannot hold child nodes
		if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {

			//Opera fix for relative positioning
			if (/relative/.test(this.element.css('position')) && $.browser.opera)
				this.element.css({ position: 'relative', top: 'auto', left: 'auto' });

			//Create a wrapper element and set the wrapper to the new current internal element
			this.element.wrap(
				$('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
					position: this.element.css('position'),
					width: this.element.outerWidth(),
					height:...