GOAL EDITOR - Gantt Editor - Simple Bar Drags

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
<div class="gantt">
    <div class="barWrap">
        <div class="handle"></div>
        <div class="bar"></div>
    </div>
    <div class="barWrap">
        <div class="bar orange"></div>
    </div>
    <div class="barWrap">
        <div class="bar green"></div>
    </div>
    <div class="barWrap">
        <div class="bar blue"></div>
    </div>
</div>

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() {
    $('.barWrap').wrapInner('<div class="sorter"></div>');
    $( ".gantt" ).sortable({
        handle: '.sorter'
    });
    
    $( ".bar" ).resizable({
        handles: 'e, w',
        grid: [ 20, 0 ]
    });
    
    $(".gantt").disableSelection();
});