JSFiddle - React, Tailwind, and code Playground

by oterox

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
PGRpdiBjbGFzcz0iZ2FudHQiPgogICAgPGRpdiBjbGFzcz0iYmFyV3JhcCI+CiAgICAgICAgPGRpdiBjbGFzcz0iaGFuZGxlIj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJiYXIiPjwvZGl2PgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJiYXJXcmFwIj4KICAgICAgICA8ZGl2IGNsYXNzPSJiYXIgb3JhbmdlIj48L2Rpdj4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iYmFyV3JhcCI+CiAgICAgICAgPGRpdiBjbGFzcz0iYmFyIGdyZWVuIj48L2Rpdj4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iYmFyV3JhcCI+CiAgICAgICAgPGRpdiBjbGFzcz0iYmFyIGJsdWUiPjwvZGl2PgogICAgPC9kaXY+CjwvZGl2Pg==

CSS

.gantt {
    width:500px;
    border:1px solid red;
    padding:0 5px;
}
.barWrap {
    margin:5px 0;
    background:#ccc;
    height:30px;
    position:relative;
}
.bar {
    height:30px; width:300px; background:red;
}
.bar.blue {
    background:blue;
}
.bar.orange {
    background:orange;
}
.bar.green {
    background:green;
}
.ui-sortable-placeholder {
    height:30px !important;
}

JavaScript

$(function() {
    $( ".gantt" ).sortable({
    });
    
    $( ".bar" ).draggable({
        connectToSortable: '.gantt',
        containment: '.barWrap',
        grid: [20, 0]
    });
    
    $( ".bar" ).resizable({
        handles: 'e, w',
        grid: [ 20, 0 ]
    });
    
    $(".gantt").disableSelection();
});