当前位置：文江博客话题详情

使用 jQuery 的甘特图

发布于 2024-10-03 13:45:12 字数 242 浏览 6 评论 0原文

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

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

我想要的是通过拖动栏可以立即完成排序和移动。如何实现这一目标？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我爱人 2024-10-10 13:45:12

可排序的小部件具有句柄功能。所以：

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

编辑（见评论）：你必须拿出可拖动的，在我看来这还不错，因为人们仍然可以使用可调整大小来改变位置。您可以尝试使用可拖动手柄来找到它们都可以工作的方法。

The sortable widget has a handle feature. So:

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

Edited (see comment): You have to take out the draggable, which IMO isn't so bad because people can still use resizable to change the position. You could experiment with draggable handles to find a method where they both work.

回复收藏 0 原文

汹涌人海 2024-10-10 13:45:12

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

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

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

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

It's an old question, but you just need to add another div wrapper to achieve this (jsfiddle):

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

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

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

回复收藏 0 原文

~没有更多了~