Pytanie Wykres Gantta z jQuery


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

Obecnie sortowanie między wierszami można wykonać, przeciągając barWrap (szare). Aby przesunąć pasek Gantta można to zrobić, przeciągając pasek.

To, czego chcę, to sortowanie i przenoszenie, można zrobić od razu, przeciągając pasek. Jak to osiągnąć?

Każda pomoc będzie doceniona, dziękuję.


12
2017-11-23 08:59


pochodzenie


+1 Świetny jsfiddle, bardzo mi pomógł. - Majid Fouladpour
Cieszę się, że ci pomogło. - Jeaf Gilbert
Jsfiddle jest wyłączony. Czy możesz ponownie opublikować kod? - Ernesto Campohermoso
@ErnestoCampohermoso Spróbuj ponownie, cofnąłem moją nazwę użytkownika JSFiddle. Nie zauważyłem, że zmiana nazwy użytkownika wpływa na adresy URL, dziękuję. - Jeaf Gilbert
Działa w porządku! Dzięki. - Ernesto Campohermoso


Odpowiedzi:


Widżet do sortowania ma funkcję uchwytu. Więc:

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

Edytowane (patrz komentarz): Musisz wyjąć przeciągalny, który IMO nie jest taki zły, ponieważ ludzie mogą nadal używać resizable do zmiany pozycji. Możesz eksperymentować z przeciągalnymi uchwytami, aby znaleźć metodę, w której obaj pracują.


6
2017-11-23 09:17



Och, to nie działa :( Przeciągane i sortable muszą się ze sobą ingerować. Będę nad tym pracował. - Nathan MacInnes
Tak, zrobiłem to. Myślę, że to możliwe. - Jeaf Gilbert
W końcu rozdzieliłem ruch i przeciągam uchwyty, dziękuję. - Jeaf Gilbert
Cieszę się, że rozwiązałeś problem. - Nathan MacInnes


To stare pytanie, ale aby to osiągnąć, wystarczy dodać kolejne opakowanie div (jsfiddle):

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

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

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

0
2017-09-07 06:42