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

編集済み（コメントを参照）：ドラッグ可能なものを削除する必要があります。これは、位置を変更するためにサイズ変更可能なものを使用できるため、IMO はそれほど悪くありません。ドラッグ可能なハンドルを試して、両方が機能する方法を見つけることができます。

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