Gantt chart

by justin_barber_arvig

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">A name</div>
    </div>
    <div class="barWrap">
        <div class="bar blue"></div>
    </div>
</div>

<div class="addNew">
add new
</div>
</div>

CSS

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

JavaScript

$(function() {
var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$(".gantt").sortable({
    cancel: ".fixed",
    distance: 5, zIndex: 2700
});
$(".gantt").disableSelection();


   $( ".bar" ).sortable({
    cancel: ".fixed",
    distance: 5, zIndex: 2700
    });
    $(".bar").disableSelection();
    
    $( ".bar" ).draggable({
        connectToSortable: '.barWrap',
        containment: '.barWrap',
        grid: [20, 0]
    });
    
   /*  $( ".barWrap" ).draggable({
        connectToSortable: '.gantt',
        containment: '.gantt'
    }); */
    
    $( ".bar" ).resizable({
        handles: 'e, w',
        grid: [ 20, 0 ]
    });
    
    $(".bar").disableSelection();
});
$('.addNew').click(function(){
 var newBar = $('<div class="barWrap"><div class="handle"></div><div class="bar">new</div></div>');
 newBar.find('.bar').draggable({
        connectToSortable: '.barWrap',
        containment: '.barWrap',
        grid: [20, 0]
    });
 console.log(newBar);
 $('.barWrap').first().after(newBar);
})