带有 jQuery 的甘特图答案

【问题标题】：Gantt Chart with jQuery带有 jQuery 的甘特图
【发布时间】：2010-11-23 08:59:06
【问题描述】：

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

目前可以通过拖动 barWrap（灰色）来完成行之间的排序。移动甘特条可以通过拖动条来完成。

我想要的是排序和移动可以通过拖动栏一次完成。如何做到这一点？

任何帮助将不胜感激，谢谢。

【问题讨论】：

+1 很棒的 jsfiddle，帮了我很多。
jsfiddle 已关闭。你能重新发布代码吗？
@ErnestoCampohermoso 请再试一次，我回滚了我的 JSFiddle 用户名。没有注意到用户名更改会影响 URL，谢谢。

标签： jquery jquery-ui gantt-chart

【解决方案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 还不错，因为人们仍然可以使用调整大小来改变位置。您可以尝试使用可拖动的句柄来找到它们都适用的方法。

【讨论】：

哦，它不起作用:(可拖动的和可排序的肯定相互干扰。我会继续努力的。

【解决方案2】：

这是一个老问题，但您只需要添加另一个 div 包装器即可实现此目的 (jsfiddle)：

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

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

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

【讨论】：