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

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

使用jQuery的甘特图

2 个答案: