Gantt Chart with jQuery

Jeaf Gilbert picture Jeaf Gilbert · Nov 23, 2010 · Viewed 9.4k times · Source

http://jsfiddle.net/JeaffreyGilbert/VkghS/

Currently sorting between rows can be done by dragging barWrap (grey). To move gantt bar can be done by dragging the bar.

What I want is sorting and moving can be done at once by dragging the bar. How to achieve this?

Any helps would be appreciated, thank you.

Answer

Nathan MacInnes picture Nathan MacInnes · Nov 23, 2010

The sortable widget has a handle feature. So:

$(function() {
    $( ".gantt" ).sortable({
        handle: '.bar' // Make it sortable by dragging the .bar instead of the container
    });
    /*
    $( ".bar" ).draggable({
        connectToSortable: '.gantt',
        containment: '.barWrap',
        grid: [20, 0]
    });
    */
    $( ".bar" ).resizable({
        handles: 'e, w',
        grid: [ 20, 0 ]
    });

    $(".gantt").disableSelection();
});

Edited (see comment): You have to take out the draggable, which IMO isn't so bad because people can still use resizable to change the position. You could experiment with draggable handles to find a method where they both work.