Gantt Chart with jQuery

Question

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.

@ErnestoCampohermoso Please try again, I rolled back my JSFiddle username. Didn't notice that username changing affects the URLs, thanks. — Jeaf Gilbert, Aug 20 '15 at 04:45

Nathan MacInnes · Accepted Answer · 2010-11-23T09:27:50.870

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.

Oh, it doesn't work :( The draggable and sortables must be interfering with each other. I'll keep working on it. — Nathan MacInnes, Nov 23 '10 at 09:21

score 0 · Answer 2 · answered Sep 07 '12 at 06:42

It's an old question, but you just need to add another div wrapper to achieve this (jsfiddle):

$(function() {
    $('.barWrap').wrapInner('<div class="sorter"></div>');
    $( ".gantt" ).sortable({
        handle: '.sorter'
    });

    $( ".bar" ).resizable({
        handles: 'e, w',
        grid: [ 20, 0 ]
    });

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

Gantt Chart with jQuery

2 Answers2