отработанные часы

by Ekaterina Klimovich

HTML

<div class="gantt">
    <div class="barWrap">
        <div class="handle"></div>
        <div class="bar"></div>
    </div>
    <div class="barWrap">
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="m-part"></div>
        <div class="bar orange" style="text-align: center;text-align: center; position: relative; left: 60px;">ghgh</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;
}
.m-part {
    background: #dddddd;
    margin-right:1px;
    width: 20px;
    height: 30px;
    float:left;
}
.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();
});*/