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.

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并不是那么糟糕,因为人们仍然可以使用resizable来改变位置.您可以尝试使用可拖动的句柄来查找它们都可以工作的方法.