Диаграмма Ганта с JQuery

Question

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

В настоящее время сортировка между строками может выполняться перетаскиванием barWrap (серый).Переместить полосу Ганта можно, перетащив полосу.

То, что я хочу, - это сортировка, и перемещение можно выполнить сразу, перетащив полосу.Как этого добиться?

Буду признателен за любую помощь, спасибо.

Answer 1

Сортируемый виджет имеет функцию дескриптора.Итак:

$(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();
});

Отредактировано (см. Комментарий) : Вы должны убрать перетаскиваемый объект, что не так уж плохо, потому что люди все еще могут использовать изменяемый размер для изменения позиции.Вы можете поэкспериментировать с перетаскиваемыми ручками, чтобы найти метод, в котором они оба работают.

Answer 2

Это старый вопрос, но вам просто нужно добавить еще одну упаковку div для достижения этого ( jsfiddle ):

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

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

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